引导程序 4 中不同 col 大小的备用背景颜色

Question

我有以下网格。在大型台式机 (col-lg-4( 上，我需要为前 3 个div 提供特殊背景，然后再次为div 7 到 9 等。有一个中等视口(col-md-2(，我需要为div 1到2,5-6,9-10等提供不同的背景。

我玩了"nth"，没有任何成功。这似乎是错误的方式。

<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6/div>
<div7</div>
<div>8</div>
[...]
</div>
</div>

Answer 1

根据 Bootstrap 文档：

小≥ 576px 中≥ 768px 大≥ 992px

然后，当您要更改颜色时，您可以设置所需的大小，并使用@media规则为所需的div's设置所需的颜色：

.CSS：

@media screen and (min-width: 0px) and (max-width: 576px) {
.first-two-divs { background-color: red; }
.third-div { background-color: orange; }
.five-six-divs  { background-color: green; }
}
@media screen and (min-width: 577px) and (max-width: 768x) {
.first-two-divs { background-color: green; }
.third-div { background-color: yellow; }
.five-six-divs  { background-color: red; }
}
@media screen and (min-width: 769px) {
.first-two-divs { background-color: blue; }
.third-div { background-color: red; }
.five-six-divs  { background-color: yellow; }
}

.HTML：

<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="first-two-divs">1</div>
<div class="first-two-divs">2</div>
<div class="third-div">3</div>
<div>4</div>
<div class="five-six-divs">5</div>
<div class="five-six-divs">6/div>    
</div>
</div>

更新：

如果无法将类设置为div，请尝试使用:nth-child()选择器：。但是，您需要在CSS样式表中编写所有所需的div数量：

@media screen and (min-width: 0px) and (max-width: 400px) {
.row > div > div:nth-child(2) {
background-color: red;
}
.row > div > div:nth-child(3) {
background-color: green;
}
.row > div > div:nth-child(4) {
background-color: pink;
}
.row > div > div:nth-child(5) {
background-color: orange;
}
}
@media screen and (min-width: 401px) and (max-width: 599px) {
.row > div > div:nth-child(2) {
background-color: orange;
}
.row > div > div:nth-child(3) {
background-color: red;
}
.row > div > div:nth-child(4) {
background-color: green;
}
.row > div > div:nth-child(5) {
background-color: pink;
}
}
@media screen and (min-width: 600px) {
.row > div > div:nth-child(2) {
background-color: pink;
}
.row > div > div:nth-child(3) {
background-color: orange;
}
.row > div > div:nth-child(4) {
background-color: red;
}
.row > div > div:nth-child(5) {
background-color: green;
}
}

Answer 2

@StepUp 按照你的建议，我现在已经这样做了。非常感谢您的帮助

@include media-breakpoint-down(sm) {
.row.col-ordered {
> div.col-sm-12 {
padding: .5rem !important;
&:nth-child(1),
&:nth-child(3),
&:nth-child(5),
&:nth-child(7),
&:nth-child(9),
&:nth-child(11) {
background-color: $gray-light;
}
}
}
}
@include media-breakpoint-between(md,lg) {
.row.col-ordered {
> div.col-sm-12 {
padding: .5rem !important;
&:nth-child(1),
&:nth-child(2),
&:nth-child(5),
&:nth-child(6),
&:nth-child(9),
&:nth-child(10) {
background-color: $gray-light;
}
}
}
}
@include media-breakpoint-up(lg) {
.row.col-ordered {
> div.col-sm-12.col-md-6 {
padding: .5rem !important;
&:nth-child(1),
&:nth-child(2),
&:nth-child(3),
&:nth-child(7),
&:nth-child(8),
&:nth-child(9) {
background-color: $gray-light;
}
&:nth-child(4),
&:nth-child(5),
&:nth-child(6),
&:nth-child(10) {
background-color: white;
}
}
}
}