Come cambiare il colore di una riga in Bootstrap 3?

Question

Voglio cambiare il colore di sfondo di reline alternando in una griglia di bootstrap 3.Pensavo che potessi creare un po 'di CSS e aggiungerlo alla classe nel div ma il colore non cambia.

Ecco il mio CSS:

.row-buffer {
margin-top:20px;
margin-bottom:20px;
}

.row-even {
background-color:#76A0D3;
}
.row-odd {
background-color:#BDE3FB;
}

.

E la mia riga è stata definita come:

<div class="row row-buffer row-even">

.

o:

<div class="row row-buffer row-odd">

.

Il buffer della riga funziona perfettamente ma la fila - anche e la fila non sembra fare la differenza?(Le mie righe vengono definite all'interno di un contenitore.)

Sto abbaiando l'albero sbagliato?

Answer 1

Senza essere in grado di vedere la tua situazione esatta, suppongo che tu stia avendo un problema a causa della specificità del selettore.Se Bootstrap ha un selettore più specifico rispetto a solo .Class, la tua regola non lo sovrascriverà mai.Hai bisogno di corrispondere o essere più specifico nel selettore rispetto a Bootstrap.

Un modo semplice per ottenere un sacco di specificità è aggiungere un ID ai tuoi selettori come:

#myrows .row-even {
    background-color:#76A0D3;
}
#myrows .row-odd {
    background-color:#BDE3FB;
}

.

Ho creato un piccolo esempio di come la specificità può causare problemi: http://jsfiddle.net/path411/jyuy2/

Answer 2

Questi sono i selettori specifici che è possibile scadere per cambiare il colore delle righe dispari in bootstrap:

.table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th {
    background-color: #your-color;
}

.

Answer 3

Suppongo che tu stia cercando di creare diversi stili di sfondo / colori per alternando righe in un tavolo.

Il modo più semplice è semplicemente aggiungere un tag auto-racchiuso

    <AlternatingRowStyle CssClass="danger" />

.

All'interno della tabella prima dei dati. Un controllo GridView in ASP.NET posiziona questo dopo l'ASP

Tag GridView e prima del tag delle colonne.

Vedrai immediatamente l'effetto poiché Bootstrap ha questo predefinito.

Spero che la mia risposta aiuterà qualcuno in futuro.

Cheers!