Como mudar a cor de uma linha no Bootstrap 3?

Question

Quero alterar a cor de fundo das linhas alternadas em uma grade do Bootstrap 3.Pensei que poderia criar algum CSS e adicioná-lo à classe na div, mas a cor não muda.

Aqui está meu CSS:

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

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

E minha linha está sendo definida assim:

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

ou:

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

O buffer de linha está funcionando perfeitamente, mas a linha par e a linha ímpar não parecem estar fazendo nenhuma diferença?(Minhas linhas estão sendo definidas dentro de um contêiner.)

Estou latindo para a árvore errada?

Answer 1

Sem poder ver sua situação exata, acho que você está tendo um problema devido à especificidade do seletor.Se o bootstrap tiver um seletor mais específico do que apenas .class, sua regra nunca o substituirá.Você precisa combinar ou ser mais específico em seu seletor do que o bootstrap.

Uma maneira fácil de obter muita especificidade é adicionar um ID aos seus seletores, como:

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

Criei um pequeno exemplo de como a especificidade pode causar problemas:http://jsfiddle.net/path411/JyUy2/

Answer 2

Estes são os seletores específicos que você pode substituir para alterar a cor das linhas ímpares no Bootstrap:

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

Answer 3

Presumo que você esteja tentando criar diferentes estilos/cores de fundo para linhas alternadas em uma tabela.

A maneira mais simples é apenas adicionar uma tag auto-incluída

    <AlternatingRowStyle CssClass="danger" />

dentro da sua tabela antes dos dados. Em um controle gridview no asp.net basta colocar isso após o asp

tag gridview e antes da tag colunas.

Você verá imediatamente o efeito, pois o Bootstrap tem isso predefinido.

Espero que minha resposta ajude alguém no futuro.

Saúde !