CSS Bootstrap容器背景

Question

我正在使用引导程序，我想知道为容器提供背景的一种干净方法。

我使用的是引导类container，没有container-fluid。Bootstrap文档明确指出我不应该嵌套容器，那么实现此目标的替代方法是什么？如果我将背景设置为container左右空白仍为白色，则我也想给该空间上色，但是我也希望内容以对齐方式container对齐，而不是container-fluid对齐方式。有什么建议么 ？我当前的解决方案是嵌套一个container内部，container-fluid并从第一个中删除填充，但是我想提出一个更好的解决方案，该解决方案不违反引导文档。

提前致谢 ！

编辑

例如这是我所拥有的

<div class="container-fluid my-class">
    <div class="container">
        Some rows and columns here
    </div>
</div>

然后我在CSS中覆盖bootstrap的填充

.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.my-class {
    background: red;
}

但是，就像我说的那样，这是不好的方法。

Answer 1

Bootstrap doc clearly states that I shouldn't nest containers 在其他容器下。因此，只需将您的容器div嵌套在一个新的div类下，container-bg然后像这样将background-image添加到该div中：

HTML：

<div class="container-bg">
    <div class="container">
        <!-- your content -->
    </div>
</div>

CSS：

.container-bg {
    background: xxx;
}