bootstrap 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

According to Bootstrap documentation:

小 ≥ 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，then try to use :nth-child() selector:。但是，您需要在 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;
            }
        }
    }
}