Question

我的bootstrap有问题。

在大屏幕上，我有一个有2个列的网格（所以col-lg-6），我想在我的集团上有一个替代背景，如下所示：

（bg white）（bg red）

（bg red）（bg white）

（bg white）（bg red）

...

我使用了nth-child（偶数）和nth-child（奇数）但是使用这个解决方案我的第一列是白色，第二列是红色（但对于col-xs-12来说很好）。

你们知道如何“交替”甚至奇怪吗？

非常感谢你！

Answer 1

如果使用包装器包装引导网格列，则可以。

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

备用动态背景引导程序

1 个答案: