如果你的内容要跨越整个宽度,你需要使用Bootstrap的"容器"和"行"吗？

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可言,整个页面下引导3和4的样式规则显示效果出色？

PS如果可能的话,请指向或引用与此相关的官方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文档 ......

"Bootstrap需要一个包含元素来包装网站内容并容纳我们的网格系统."

因此,目的container是双重的:1)"容纳网格系统",2)"包装网站内容".但是,当您使用网格(.row和.col-*)时,需要一个容器来包装.row.

即使是基本的入门模板采用container无网格.

综上所述...

• 您可以使用.container或.container-fluid单独包含元素和页面内容.
• 如果你使用网格(.row和.col-*),.row必须在一个.container或.container-fluid,并且.col-*必须在一个内部.row.

Answer 2

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