如何在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;
}

Answer 3

我假设您正在尝试为表格中的交替行创建不同的背景样式/颜色。

最简单的方法是添加一个自封闭标签

    <AlternatingRowStyle CssClass="danger" />

在数据之前的表内。在asp.net的gridview控件中，只需将其放在asp

之后

gridview标记和列标记之前。

由于Bootstrap具有此预定义功能，您将立即看到效果。

我希望我的回答能在将来帮助某人。

干杯！