Question

我正在使用bootstrap，我想知道什么是一个干净的方式来为我的容器提供背景。

我使用的是引导类container，而不是container-fluid。 Bootstrap doc明确指出我不应该嵌套容器，那么实现这一目标的替代方案是什么？如果我为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下，并将背景图像添加到该div中，如下所示：

<强> HTML：

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

<强> CSS：

.container-bg {
    background: xxx;
}

Answer 2

如果要设置整个页面的背景，请将其设置为body。

如果要为页面的某个部分设置它，请将该部分包含在适当的元素（例如div或section）中，添加类，id或其他方式使用选择器来定位它...只是不是使用Bootstrap 提供的类的那个。

Answer 3

对于Boostrap V4.0和更高版本

如果您想使用boostrap颜色作为背景，则可以使用these colors作为背景，例如下面的示例

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

CSS Bootstrap容器背景

3 个答案: