twitter-bootstrap - 备用动态背景 Bootstrap

Question

我的 Bootstrap 有问题。

在大屏幕上，我有一个包含 2 列的网格(因此是 col-lg-6)，我想在我的区域上使用备用背景，如下所示:

(背景白)(背景红)

(背景红)(背景白)

(背景白)(背景红)

...

我使用了第 nth-child(even) 和 nth-child(odd)，但是使用这个解决方案，我的第一列是白色的，第二列是红色的(但对 col-xs-12 有好处)。

你们知道如何“交替”偶数和奇数吗？

非常感谢!

Answer 1

如果用包装器包装 Bootstrap 网格列，就可以。

.col-lg-6 {
    width: 50%;
    float: left;
}
.row:nth-child(even) div:nth-child(even) {
    background-color: blue;
}
.row:nth-child(even) div:nth-child(odd) {
    background-color: red;
}
.row:nth-child(odd) div:nth-child(even) {
    background-color: red;
}
.row:nth-child(odd) div:nth-child(odd) {
    background-color: blue;
}

<div class="row">
	<div class="col-lg-6">First</div>
	<div class="col-lg-6">Second</div>
</div>
<div class="row">
	<div class="col-lg-6">First</div>
	<div class="col-lg-6">Second</div>
</div>
<div class="row">
	<div class="col-lg-6">First</div>
	<div class="col-lg-6">Second</div>
</div>
<div class="row">
	<div class="col-lg-6">First</div>
	<div class="col-lg-6">Second</div>
</div>