我正在寻找一种在Bootstrap 3中以响应式布局交替行颜色的方法.我无法弄清楚如何在没有大量令人困惑的CSS的情况下做到这一点,并希望有人有更好的解决方案.
这是一个简单的前提：12个div在大屏幕上显示为4行3,在小屏幕上显示6行2,在移动设备上显示12行1.无论屏幕大小如何,行都需要具有交替的背景颜色.
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>
任何想法/提示/帮助将不胜感激.
解决方法
由于您使用的是bootstrap,并且您希望为每种屏幕尺寸交替使用行颜色,因此您需要为所有屏幕尺寸编写单独的样式规则.
/* 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;
}
}
工作FIDDLE我在这里也包含了bootstrap CSS.
