如果您的内容要跨越整个宽度，您是否需要使用引导程序“容器”和“行”？

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

您可以将元素直接放在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 需要一个包含元素来包装网站内容和 容纳我们的网格系统。”

因此，container 的目的有两个：1）“容纳网格系统”，以及 2）“包装网站内容”。但是，当您使用网格（.row 和 .col-*）时，需要容器来包装 .row。

即使basic starter template 也使用container 而没有网格。

总结...

• 您可以单独使用.container 或.container-fluid 来包含元素和页面内容。
• 如果您使用网格（.row 和 .col-*），.row 必须在 .container 或 .container-fluid 内，.col-* 必须在 .row 内。

Answer 2

您应该将.container-fluid 添加到您的包装div。您应该将表格、div 或表单包装在一个 div 中，并将 .container-fluid 类添加到其中。

The official bootstrap documentation on grid system

Answer 3

如果您希望您的内容跨越文档的整个宽度，您应该使用.container-fluid 类。如果没有这个类，.row 的负边距将导致水平滚动。

您可以省略 container-fluid 和 row，但这可能会在使用其他 Bootstrap 组件时导致意外结果。

.col-md-4 {
  background: red;
}

.col-md-8 {
  background: green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4"> ... </div>
    <div class="col-md-8"> ... </div>
  </div>
</div>

Answer 4

使用流体容器跨越父级的整个宽度。