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

Question

我想引导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

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

Answer 2

如果您希望您的内容跨越文档的整个宽度，则应使用.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 3

您应该添加.container-fluid到您的包装股利。您应该将表格，div或表格封装在div中，然后将类.container-fluid添加到它。

The official bootstrap documentation on grid system

Answer 4

简短的回答：你做需要使用container，但你不需要使用row。

您可以将元素直接放入container或container-fluid。你是不是需要向使用网格（.row和.col-*），并容器单独可以作为内容的容器。只有在需要响应式12单元结构时才使用网格。

例如，这是有效的引导......

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

从Bootstrap docs ...

“引导需要包含的元素来包装网站内容和 房子我们的电网系统。 “

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

即使basic starter template利用container没有电网。

总之...

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