Html 如何在 Bootstrap 3 中更改行的颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20010080/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the colour of a row in Bootstrap 3?
提问by branty1970
I want to change the background colour of alternating rows in a Bootstrap 3 grid. I thought that I could create some CSS and add it to the class in the div but the colour doesn't change.
我想更改 Bootstrap 3 网格中交替行的背景颜色。我以为我可以创建一些 CSS 并将其添加到 div 中的类中，但颜色不会改变。
Here's my CSS:
这是我的 CSS：
.row-buffer {
margin-top:20px;
margin-bottom:20px;
}
.row-even {
background-color:#76A0D3;
}
.row-odd {
background-color:#BDE3FB;
}
And my row is being defined like so:
我的行是这样定义的：
<div class="row row-buffer row-even">
or:
或者：
<div class="row row-buffer row-odd">
The row-buffer is working perfectly but the row-even and row-odd don't seem to be making any difference? (My rows are being defined within a container.)
行缓冲区工作正常，但行偶数和行奇数似乎没有任何区别？（我的行是在容器中定义的。）
Am I barking up the wrong tree?
我是不是叫错了树？
回答by Ben
Without being able to see your exact situation I'm going to guess that you are having a problem due to selector specificity. If bootstrap has a more specific selector than just .class, then your rule will never override it. You either need to match or be more specific in your selector than bootstrap.
在无法看到您的确切情况的情况下，我会猜测您由于选择器的特殊性而遇到了问题。如果 bootstrap 有一个比 .class 更具体的选择器，那么你的规则永远不会覆盖它。您需要在选择器中匹配或比引导程序更具体。
An easy way to typically gain a lot of specificity is to add an id to your selectors like :
通常获得很多特异性的一种简单方法是向您的选择器添加一个 id，例如：
#myrows .row-even {
background-color:#76A0D3;
}
#myrows .row-odd {
background-color:#BDE3FB;
}
I created a small example of how specificity can cause problems: http://jsfiddle.net/path411/JyUy2/
我创建了一个关于特异性如何导致问题的小例子：http: //jsfiddle.net/path411/JyUy2/
回答by Dhaulagiri
These are the specific selectors you can override to change the color of odd rows in Bootstrap:
这些是您可以覆盖以更改 Bootstrap 中奇数行颜色的特定选择器：
.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
background-color: #your-color;
}
回答by SeeSharp
I assume you are trying to create different background styles/colors for alternating rows in a table.
我假设您正在尝试为表格中的交替行创建不同的背景样式/颜色。
The simplest way is to just add a self enclosing tag
最简单的方法是添加一个自封闭标签
<AlternatingRowStyle CssClass="danger" />
inside your table before the data.In a gridview control in asp.net just place this after the asp
在数据之前的表中。在 asp.net 中的 gridview 控件中，只需将其放在 asp 之后
gridview tag and before the columns tag.
gridview 标记和列标记之前。
You will immediately see the effect since Bootstrap has this predefined.
您将立即看到效果，因为 Bootstrap 已预定义了此效果。
I hope my answer will help somebody in the future.
我希望我的回答能在未来对某人有所帮助。
Cheers !
干杯！
