CSS Bootstrap 3 中的交替行颜色 - 无表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25121144/
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
Alternating Row Colors in Bootstrap 3 - No Table
提问by Trick Kramer
I am looking for a way to do alternating row colors in a responsive layout in Bootstrap 3. I cannot figure out how to do it without a LOT of extensive, confusing CSS and was hoping that someone had a better solution.
我正在寻找一种在 Bootstrap 3 的响应式布局中交替行颜色的方法。如果没有大量广泛的、令人困惑的 CSS，我无法弄清楚如何做到这一点，并希望有人有更好的解决方案。
Here is the simple premise: 12 divs that display as 4 rows of 3 on large screens, 6 rows of 2 on small screens, and 12 rows of 1 on mobile. The rows will need to have alternating background colors regardless of screen size.
这是一个简单的前提：12 个 div 在大屏幕上显示为 4 行 3，在小屏幕上显示为 6 行 2，在移动设备上显示为 12 行 1。无论屏幕大小如何，行都需要具有交替的背景颜色。
The HTML for Bootstrap 3 is as follows:
Bootstrap 3 的 HTML 如下：
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">Emp-01</div>
<div class="col-md-4 col-sm-6 col-xs-12">Emp-02</div>
<div class="col-md-4 col-sm-6 col-xs-12">Emp-03</div>
<div class="col-md-4 col-sm-6 col-xs-12">Emp-04</div>
<div class="col-md-4 col-sm-6 col-xs-12">Emp-05</div>
<div class="col-md-4 col-sm-6 col-xs-12">Emp-06</div>
<div class="col-md-4 col-sm-6 col-xs-12">Emp-07</div>
<div class="col-md-4 col-sm-6 col-xs-12">Emp-08</div>
<div class="col-md-4 col-sm-6 col-xs-12">Emp-09</div>
<div class="col-md-4 col-sm-6 col-xs-12">Emp-10</div>
<div class="col-md-4 col-sm-6 col-xs-12">Emp-11</div>
<div class="col-md-4 col-sm-6 col-xs-12">Emp-12</div>
</div>
</div>
Any thoughts/hints/help would be greatly appreciated.
任何想法/提示/帮助将不胜感激。
回答by aniskhan001
Since you are using bootstrapand you want alternating row colors for every screen sizes you need to write separate style rules for all the screen sizes.
由于您正在使用引导程序并且您希望为每个屏幕尺寸交替行颜色，因此您需要为所有屏幕尺寸编写单独的样式规则。
/* For small screen */
.row :nth-child(even){
background-color: #dcdcdc;
}
.row :nth-child(odd){
background-color: #aaaaaa;
}
/* For medium screen */
@media (min-width: 768px) {
.row :nth-child(4n), .row :nth-child(4n-1) {
background: #dcdcdc;
}
.row :nth-child(4n-2), .row :nth-child(4n-3) {
background: #aaaaaa;
}
}
/* For large screen */
@media (min-width: 992px) {
.row :nth-child(6n), .row :nth-child(6n-1), .row :nth-child(6n-2) {
background: #dcdcdc;
}
.row :nth-child(6n-3), .row :nth-child(6n-4), .row :nth-child(6n-5) {
background: #aaaaaa;
}
}
Working FIDDLE
I have also included the bootstrap CSS here.
工作FIDDLE
我还在此处包含了引导程序 CSS。
回答by James Perih
I find that if I specify .row:nth-of-type(..), my other row's elements (for other formatting, etc) also get alternating colours. So rather, I'd define in my css an entirely new class:
我发现如果我指定.row:nth-of-type(..)，我的其他行的元素（用于其他格式等）也会交替颜色。因此，我会在我的 css 中定义一个全新的类：
.row-striped:nth-of-type(odd){
background-color: #efefef;
}
.row-striped:nth-of-type(even){
background-color: #ffffff;
}
So now, the alternating row colours will only apply to the row container, when I specify its class as .row-striped, and not the elements inside the row.
所以现在，当我将其类指定为 时，交替的行颜色将仅适用于行容器，.row-striped而不适用于row.
<!-- this entire row container is #efefef -->
<div class="row row-striped">
<div class="form-group">
<div class="col-sm-8"><h5>Field Greens with strawberry vinegrette</h5></div>
<div class="col-sm-4">
<input type="number" type="number" step="1" min="0"></input><small>/salad</small>
</div>
</div>
</div>
<!-- this entire row container is #ffffff -->
<div class="row row-striped">
<div class="form-group">
<div class="col-sm-8"><h5>Greek Salad</h5></div>
<div class="col-sm-4">
<input type="number" type="number" step="1" min="0"></input><small>/salad</small>
</div>
</div>
</div>
回答by mouhammed
You can use this code :
您可以使用此代码：
.row :nth-child(odd){
background-color:red;
}
.row :nth-child(even){
background-color:green;
}
回答by Hyman
There isn't really a way to do this without the css getting a little convoluted, but here's the cleanest solution I could put together (the breakpoints in this are just for example purposes, change them to whatever breakpoints you're actually using.) The key is :nth-of-type(or :nth-child-- either would work in this case.)
没有真正的方法可以在 css 变得有点复杂的情况下做到这一点，但这是我可以组合在一起的最干净的解决方案（这里的断点仅用于示例目的，将它们更改为您实际使用的任何断点。）关键是:nth-of-type（或者:nth-child- 在这种情况下都可以。）
Smallest viewport:
最小视口：
@media (max-width:$smallest-breakpoint) {
.row div {
background: #eee;
}
.row div:nth-of-type(2n) {
background: #fff;
}
}
Medium viewport:
中视口：
@media (min-width:$smallest-breakpoint) and (max-width:$mid-breakpoint) {
.row div {
background: #eee;
}
.row div:nth-of-type(4n+1), .row div:nth-of-type(4n+2) {
background: #fff;
}
}
Largest viewport:
最大视口：
@media (min-width:$mid-breakpoint) and (max-width:9999px) {
.row div {
background: #eee;
}
.row div:nth-of-type(6n+4),
.row div:nth-of-type(6n+5),
.row div:nth-of-type(6n+6) {
background: #fff;
}
}
Working fiddle here
在这里工作小提琴
回答by AixNPanes
The thread's a little old. But from the title I thought it had promise for my needs. Unfortunately, my structure didn't lend itself easily to the nth-of-type solution. Here's a Thymeleaf solution.
线有点旧了。但是从标题中我认为它可以满足我的需求。不幸的是，我的结构并不适合第 n 个类型的解决方案。这是一个 Thymeleaf 解决方案。
.back-red {
background-color:red;
}
.back-green {
background-color:green;
}
<div class="container">
<div class="row" th:with="employees=${{'emp-01', 'emp-02', 'emp-03', 'emp-04', 'emp-05', 'emp-06', 'emp-07', 'emp-08', 'emp-09', 'emp-10', 'emp-11', 'emp-12'}}">
<div class="col-md-4 col-sm-6 col-xs-12" th:each="i:${#numbers.sequence(0, #lists.size(employees))}" th:classappend'(${i} % 2) == 0?back-red:back-green"><span th:text="${emplyees[i]}"></span></div>
</div>
</div>
回答by David Morrow
I was having trouble coloring rows in table using bootstrap table-striped class then realized delete table-striped class and do this in css file
我在使用 bootstrap table-striped class 为 table 中的行着色时遇到问题，然后实现删除 table-striped class 并在 css 文件中执行此操作
tr:nth-of-type(odd)
{
background-color: red;
}
tr:nth-of-type(even)
{
background-color: blue;
}
The bootstrap table-striped class will over ride your selectors.
bootstrap table-striped 类将覆盖您的选择器。
