如何在Bootstrap 3中更改行的颜色？

Question

我想在Bootstrap 3网格中更改交替行的背景颜色.我以为我可以创建一些CSS并将其添加到div中的类,但颜色不会改变.

这是我的CSS:

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

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

我的行被定义如下:

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

要么:

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

行缓冲区工作正常,但行偶数和行奇数似乎没有任何区别？(我的行是在容器中定义的.)

我吠叫错了树吗？

Answer 1

如果没有能够看到你的确切情况,我会猜测你因选择器特异性而遇到了问题.如果bootstrap有一个比.class更具体的选择器,那么你的规则永远不会覆盖它.您需要在选择器中匹配或比引导程序更具体.

通常获得很多特异性的简单方法是为您的选择器添加一个id,如:

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

我创建了一个小例子,说明特异性如何导致问题:http: //jsfiddle.net/path411/JyUy2/

Answer 2

这些是您可以覆盖的特定选择器,用于更改Bootstrap中奇数行的颜色:

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