Bootstrap 3中的交替行颜色 - 无表

Question

我正在寻找一种在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>

任何想法/提示/帮助将不胜感激.

Answer 1

由于您使用的是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.

Answer 2

我发现如果我指定.row:nth-of-type(..),我的其他行的元素(对于其他格式等)也会得到交替的颜色.所以,我会在我的CSS中定义一个全新的类:

.row-striped:nth-of-type(odd){
  background-color: #efefef;
}

.row-striped:nth-of-type(even){
  background-color: #ffffff;
}

所以现在,交替的行颜色仅适用于行容器,当我指定其类时.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>$30/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>$25/salad</small>
        </div>
    </div>
</div>

Answer 3

您可以使用此代码:

.row :nth-child(odd){
  background-color:red;
}
.row :nth-child(even){
  background-color:green;
}

演示:http://codepen.io/mouhammed/pen/rblsC