CSS Bootstrap 容器背景

yr9zkbsy 于 12个月前发布在 Bootstrap

关注(0)|答案(4)|浏览(165)

我正在使用 Bootstrap ，我想知道什么是一个干净的方式给我的容器给予一个背景。
我使用的是引导类container，而不是container-fluid。引导文档明确指出我不应该嵌套容器，那么实现这一目标的替代方案是什么呢？如果我为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;
}

型
但是，就像我说的，这是一个糟糕的方法。

twitter-bootstrap

来源：https://stackoverflow.com/questions/42001276/css-bootstrap-container-background

4条答案

按热度按时间

fcipmucu1#

Bootstrap doc clearly states that I shouldn't nest containersunder other 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;
}

型

赞(0）回复(0）举报 12个月前

ccgok5k52#

如果你想设置整个页面的背景，那么将其设置为body。
如果你想为页面的某个部分设置它，然后将该部分 Package 在一个适当的元素中（例如div或section），添加一个类，id或其他方法来使用选择器定位它.只是 * 不要使用Bootstrap提供的类 *。

赞(0）回复(0）举报 12个月前

qvtsj1bj3#

适用于Bootstrap V4.0及更高版本

如果你想使用 Bootstrap 颜色作为背景，你可以使用这些颜色作为背景，如下面的例子

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

字符串

赞(0）回复(0）举报 12个月前

0h4hbjxa4#

如果你想在容器中添加背景颜色，你可以像这样将样式添加为内联css。

<div class="container-fluid my-class style="background-color: green;">
<div class="container">
    Some rows and columns here
</div>
</div>

字符串

赞(0）回复(0）举报 12个月前

我来回答

CSS Bootstrap 容器背景

4条答案

相关问题

热门标签

最新问答