如果您的内容需要跨越整个宽度，是否需要使用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 或任何元素，您计划让它跨越整个宽度，那么在 Bootstrap 3 和 4 的样式规则下，是否需要使用 container、row 或 col-md-12 来使整个页面正常显示呢？

附注：如有可能，请指出或引用与此相关的官方 Bootstrap 文档。

- nonopolarity

Answer 1

简短回答: 你需要使用container，但不需要使用row。

你可以直接将元素放在container或container-fluid中。你不需要使用网格(.row和.col-*)，而仅使用container作为内容容器是可以的。只有在需要响应式12-unit结构时才使用网格。

例如，以下Bootstrap代码是有效的...

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

从 Bootstrap 文档...

"Bootstrap 要求包含一个容器来包裹网站内容并承载我们的网格系统。"

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

即使是基本的起始模板也使用了没有网格的container。

总之...

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

- Zim

---

我认为你的答案更准确...如果我添加一个类名为row的包装器div，然后在table上放置col-md-12，那么表格的边框会太宽...触及页面的边缘...如果我删除row和col-md-12的内容，那么就完美了。 - nonopolarity

Answer 2

你应该在包裹div中添加.container-fluid类。你应该将表格、div或表单包装在一个div中，并为它添加.container-fluid类。 Bootstrap网格系统的官方文档。

- neophyte

Answer 3

如果你希望内容跨越整个文档宽度，那么应该使用 .container-fluid 类。如果没有使用这个类，.row 的负 margin 值会导致水平滚动条出现。

尽管可能可以省略 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>

- Turnip

---

那么只需在table、div或form上使用.container-fluid吗？你需要任何row吗？ - nonopolarity

要按照 Bootstrap 的方式实现这个，你需要使用 .container-fluid > .row > .col-XX-XX。我认为在文档中找不到其他的实现方式。 - Turnip

因此，即使是对于一个div、table或form要跨越整个宽度，也要使用.container-fluid > .row > .col-md-12，也就是说，始终要有这3层。所以，如果你在form或table上放置了col-md-12类，则需要再加两个包装器吗？ - nonopolarity

没错，你不能没有行使用列。你不能没有容器使用行。你应该同时使用这三个。 - Turnip

Answer 4

使用 fluid-container 来跨越整个父元素的宽度。

- DawgOnKing

---

Bootstrap 中没有流体容器。 - Carol Skelly