我只应该有一个Bootstrap 3容器吗?

Jos*_*osh 26 twitter-bootstrap twitter-bootstrap-3

我正在试图找出Bootstrap 3并且遇到很多麻烦.Bootstrap 3网站说:

通过将其内容包装在.container中,轻松地将页面内容居中.容器在各种媒体查询断点处设置宽度以匹配我们的网格系统.

请注意,由于填充和固定宽度,容器默认情况下不可嵌套.

前一行似乎支持这一点,因为我不希望嵌套容器将宽度重新设置为超过父级.后一行让我觉得我应该在页面上只有一个容器(或者最多只有兄弟姐妹),不管流体/正常/等等,而不做"额外"的事情.

那是对的吗?

小智 40

你是对的,因为你不想嵌套.containers.但是,有很多情况下你会有多个容器.例如,如果您想要一个全宽度元素(屏幕宽度,而不是容器宽度).这很好:

<div class="container">
  <div class="col-md-12">
    <p>Content</p>
  </div>
</div>

<div id="full-width-element">
  <p>Other content, stretching full width of the page</p>
</div>

<div class="container">
  <div class="col-md-12">
    <p>Content</p>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

看一下Bootstrap站点上的示例:http://getbootstrap.com/getting-started/#examples,它们也使用多个.containers.

因此,没有修改或仔细考虑,嵌套容器不是一个好主意.使用多个容器很好(否则它应该是一个ID而不是一个类)!

  • 是的,文档说没有嵌套容器.然后他们继续在示例中嵌套容器(参见:http://getbootstrap.com/examples/navbar/). (9认同)