Question

我已经开始深入研究Bootstrap，我对.container类的使用感到有点困惑。

大多数教程建议使用以下结构：

-.container
--.row
---.col-
---.col-

等

我偶然发现了这个W3schools的例子： W3Schools - Bootstrap，它使用多个.container元素，并不会将所有内容都包含在.container内（例如旋转木马）。

所以我的问题：

在哪些情况下建议使用多个.container元素？
是否有一般规则，哪些类型的元素不应包含在.container？

Answer 1

法定警告：不要关注W3Schools。这是他们没有遵循Bootstrap标准的典型示例之一，示例不太好。（见UITableView infinite scrolling）。始终建议遵循Bootstrap的主要文档。

多个容器完全可以分隔内容，我可以说最好的方法是，如果你有任何背景实例扩展到整个宽度，那么你肯定会使用多个容器。

见下面的例子：

* {font-family: 'Segoe UI';}
section.about {background-color: #fcc;}
section.contact {background-color: #cfc;}
section.info {background-color: #ccf;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<section class="about">
  <div class="container">
    <div class="row">
      <div class="col-xs-4 col-xs-offset-4">This is Section 1</div>
    </div>
  </div>
</section>
<section class="contact">
  <div class="container">
    <div class="row">
      <div class="col-xs-4 col-xs-offset-4">This is Section 2</div>
    </div>
  </div>
</section>
<section class="info">
  <div class="container">
    <div class="row">
      <div class="col-xs-4 col-xs-offset-4">This is Section 3</div>
    </div>
  </div>
</section>
<p>With more content</p>
<section class="about">
  <div class="container">
    <div class="row">
      <div class="col-xs-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="col-xs-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
</section>
<section class="contact">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
  </div>
</section>
<section class="info">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
  </div>
</section>

预览

W3Fools

Answer 2

引导程序需要容器元素来托管其网格系统。因此，您应始终使用.container类的一个HTML标记。您也可以在彼此之下使用多个容器。嵌套容器不起作用，因为它们由于填充而无法嵌套。

如果您想要全宽度元素，请使用.container-fluid类。这样您就可以实现轮播项目和全宽横幅。

container元素充当引导程序应用程序的根元素，它承载所有其他元素。因此，每个bootstrap元素都应该在容器内。

Bootstrap .container一般用法

2 个答案: