html - 使用 Bootstrap 3 的全宽布局，但带有流体容器

Question

我想构建一个包含 5 个部分的页面，具有不同的全宽背景。

我的想法是这样的

<section id="aboutus">
    <div class="container">
        <div class="row>
            ....
        </div>
    </div>
</section>

在那种情况下，我可以为#aboutus 添加全宽背景，里面的内容将为 1170 像素，并且居中。问题是我必须多次重复“.container”。这方面的最佳做法是什么？

我可以用下面的代码做同样的事情吗？

<div class="container">
    <section id="aboutus">
        <div class="row">
           ....
        </div>
    </section>
</div>

Answer 1

您的第一个示例是开箱即用的处理方式。

有一个 .container-fluid 可用，您可以使用它来使您的第二个示例正常工作，但它会在左右两侧填充，从而阻止真正的整页背景。

但是，您可以通过添加类似 .container-fluid { padding:0; 的内容来覆盖它。 } 添加到自定义 CSS 文件以消除外部填充，尽管我不确定除了消除该边缘之外还会产生什么后果。参见 http://www.bootply.com/nmcwmZfcgI一个工作示例。

最后 - 虽然它更冗长 - 我会使用示例 1。它保留内置的外部填充，让您的内容远离浏览器的外边缘，无需任何额外的 CSS。参见 http://www.bootply.com/9Azdv2Jet2与第一个链接形成对比。

更新

正如另一个答案所提到的，从技术上讲，您完全可以在没有 .container 类的情况下逃脱。与执行 .container-fluid 并将填充归零具有相同的效果。

不过请注意，Bootstrap 文档明确指出它“需要一个包含元素来包装站点内容并容纳我们的网格系统”。您可能可以将其删除并且没问题，但同样，以后可能会出现无法预料的问题。