twitter-bootstrap - 如果您的内容要跨越整个宽度，您是否需要使用 Bootstrap 的 "container"和 "row"？

Question

我认为 Bootstrap 3 和 4 的标准是

<div class="container">
    <div class="row">
        <div class="col-md-4"> ... </div>
        <div class="col-md-8"> ... </div>   <!-- just add up to 12 -->
    </div>
</div>

但是如果你有一个 div , table , form ，或任何元素，您打算让它跨越整个宽度？那你需要 container或 row或 col-md-12到底，要让整个页面在 Bootstrap 3 和 4 的样式规则下很好地显示？

附言如果可能，请指向或引用与此相关的官方 Bootstrap 文档。

Answer 1

简答 : 你确实需要使用 container ，但您不需要使用 row .
您可以将元素直接放入container或 container-fluid .您不需要使用网格( .row 和 .col-* )和 单独的容器可以用作内容的容器 .仅在需要响应式 12 单元结构时才使用网格。
例如，这是有效的 Bootstrap ...

<div class="container">
   <h2>Hello World</h2>
   <p class="lead">Some other content...</p>
</div>

来自 Bootstrap docs ...

"Bootstrap requires a containing element to wrap site contents andhouse our grid system."

所以， container 的目的有两个方面:1)“容纳网格系统”，2)“包装网站内容”。但是，当您使用网格( .row 和 .col-* )时，需要一个容器来包装 .row .
甚至 basic starter template利用 container没有网格。
总之...

您可以使用 .container或 .container-fluid单独包含元素和页面内容。

如果您使用网格( .row 和 .col-* )，.row必须在 .container 内或 .container-fluid , 和 .col-*必须在 .row 内.