html - CSS Bootstrap 容器背景

Question

我正在使用 Bootstrap ，我想知道什么是为我的容器提供背景的干净方法。

我正在使用 Bootstrap 类 container，而不是 container-fluid。 Bootstrap 文档明确指出我不应该嵌套容器，那么实现这个目标的替代方法是什么？如果我为我的 container 设置背景，左右边距仍然是白色，我也想为该空间着色，但我也希望我的内容按照 container< 的方式对齐 对齐，而不是 container-fluid 对齐的方式。有什么建议 ？我当前的解决方案是在 container-fluid 中嵌套一个 container 并从第一个中删除填充，但我想做出一个不违背 Bootstrap 的更好的解决方案文档。

提前致谢!

编辑

这是我的例子

<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 文档明确指出我不应该嵌套容器 在其他容器下 所以只需将容器 div 嵌套在新类 div 下，比如 container-bg 并将背景图像添加到该 div，如下所示:

HTML:

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

CSS:

.container-bg {
    background: xxx;
}