twitter-bootstrap - 备用动态背景 bootstrap

我对引导程序有疑问。

在大屏幕上，我有一个带有2个列的网格（所以col-lg-6），并且我想在我的集团上有一个备用背景，像这样：

（bg白色）（bg红色）

（bg红色）（bg白色）

（bg白色）（bg红色）

...

我使用了nth-child（even）和nth-child（odd），但是通过这种解决方案，我的第一列是白色，第二列是红色（但对col-xs-12很有用）。

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

非常感谢 ！

最佳答案

您可以使用包装器包装引导网格列。

.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>

关于twitter-bootstrap - 备用动态背景 bootstrap ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32609171/