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 中覆盖引导程序的填充

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

.my-class {
    background: red;
}

但是，正如我所说，这是一种糟糕的做法。

原文由 George Dimitriadis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Bootstrap doc clearly states that I shouldn't nest containers 在其他容器下，所以只需将容器 div 嵌套在一个新类 div 下，比如 container-bg 并将背景图像添加到该 div，如下所示：

HTML:

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

CSS：

 .container-bg {
    background: xxx;
}

原文由 AndrewL64 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于 Boostrap V4.0 及更高版本

如果你想使用 boostrap 颜色作为背景，你可以使用 这些颜色 作为背景，如下例

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

原文由 majurageerthan 发布，翻译遵循 CC BY-SA 4.0 许可协议