我应该只有一个 Bootstrap 3 容器吗? [英] Am I only supposed to have one Bootstrap 3 container?

问题描述

我正在尝试使用 Bootstrap 3 并且遇到了很多麻烦.Bootstrap 3 网站说:

<块引用>

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

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

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

正确吗?

解决方案

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

<div class="col-md-12"><p>内容</p>

<div id="全宽元素"><p>其他内容，拉伸整个页面宽度</p>

<div class="容器"><div class="col-md-12"><p>内容</p>

查看 Bootstrap 站点上的示例:http://getbootstrap.com/getting-started/#examples，他们也使用多个 .containers.

所以如果没有修改或仔细考虑，嵌套容器不是一个好主意.使用多个容器很好(否则它应该是一个 ID 而不是一个类)！

I'm trying to figure out Bootstrap 3 and having lots of trouble. The Bootstrap 3 site says:

Easily center a page's contents by wrapping its contents in a .container. Containers set width at various media query breakpoints to match our grid system.

Note that, due to padding and fixed widths, containers are not nestable by default.

The former line seems to support this, as I wouldn't want nested containers to re-set the width to more than the parent. That latter line makes me think that I should only have one container on a page (or siblings at most), regardless of fluid/normal/etc., without doing something "extra".

Is that correct?

解决方案

You are correct in that you do not want to nest the .containers. However, there are plenty of cases where you would have multiple containers. For instance, if you want to have a full width element (screen width, not container width). This is perfectly fine:

<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>

Take a look at the examples on the Bootstrap site: http://getbootstrap.com/getting-started/#examples, they use multiple .containers as well.

So nesting container is not a good idea without modification or careful consideration. Using multiple containers is fine (otherwise it should have been an ID instead of a class as well)!

这篇关于我应该只有一个 Bootstrap 3 容器吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！