CSS Bootstrap 容器背景答案

【问题标题】：CSS Bootstrap container backgroundCSS Bootstrap 容器背景
【发布时间】：2020-10-24 14:03:25
【问题描述】：

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

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

提前致谢！

编辑

这是我的例子

<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;
}

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

【问题讨论】：

显示你到现在为止所做的代码。你实施了多少。
我更新了我的问题以显示我的结构

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案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;
}

【讨论】：

嗯，确实如此简单，现在我在质疑自己为什么要费心使用引导类来做这件事。小错字：你在 css 中以不同的方式命名了这个类

【解决方案2】：

如果要为整个页面设置背景，则设置为body。

如果您想为页面的某个部分设置它，则将该部分包装在适当的元素中（例如div 或section），添加一个类、id 或其他方式以使用选择器……只是 不是使用 Bootstrap 提供的类的选择器。

【讨论】：

【解决方案3】：

对于 Boostrap V4.0 及更高版本

如果你想使用 boostrap 颜色作为背景，你可以使用these colors 作为背景，如下例所示

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

【讨论】：