Question

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

我的想法如下

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

在这种情况下，我可以为#aboutus添加全宽背景，内部的内容将是1170px，并居中。问题是我必须重复“.container”＃39;多次。这是什么最好的做法？

我可以使用以下代码吗？

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

Answer 1

你的第一个例子是开箱即用的处理方法。

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

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

最后 - 虽然它更冗长 - 我会选择一个例子。它保持内置填充内置，允许您的内容远离浏览器的外边缘，而无需任何额外的CSS。有关第一个链接的信息，请参阅http://www.bootply.com/9Azdv2Jet2。

更新

另一个答案提到，你可以在没有.container课程的情况下从技术上逃脱。与执行.container-fluid并将填充清零相同具有相同的效果。

但请注意，Bootstrap文档清楚地说它“需要一个包含元素来包装网站内容并容纳我们的网格系统”。您可以删除它并且没问题，但是再次，以后可能会出现无法预料的问题。

Answer 2

您不需要div class="container"

你可以这样做：

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

     <section id="section2">
       <div class="row>
          ....
       </div>
     </section>
</body>

Answer 3

在我看来，使用多个容器div是完全没问题的，即

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

等

它使得干净的HTML，您将样式应用于部分背景，您不需要尝试覆盖Bootstrap CSS。

祝你好运！

带有Bootstrap 3的全宽布局，但带有流体容器

3 个答案:

更新