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的样式规则下很好地显示？

P.S。如果可能，请指向或引用与此相关的官方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 ...

＆＃34; Bootstrap需要一个包含元素来包装网站内容和安置我们的网格系统。＆＃34;

因此，container的目的是双重的：1）到＃34;容纳网格系统＆＃34;和2）到＃34;包装网站内容＆＃34;。但是，当您使用网格（.row和.col-*）时，必需容器包装.row。

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

总结......

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

Answer 2

您应该将.container-fluid添加到包装div中。你应该在div中包装table，div或form，将类.container-fluid添加到它。

The official bootstrap documentation on grid system

Answer 3

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

你需要使用Bootstrap＆＃34;容器＆＃34; ＆＃34; row＆＃34;如果你的内容要跨越整个宽度？

4 个答案: