是否需要使用Bootstrap的“容器"?和“行"如果您的内容要跨越整个宽度? [英] Do you need to use Bootstrap's "container" and "row" if your content is to span the whole width?

问题描述

我认为 Bootstrap 3 和 4 的标准是

<div class="row"><div class="col-md-4">... </div><div class="col-md-8">... </div><!-- 加起来就是 12 -->

但是如果你有一个 div、table、form 或任何你打算让它跨越整个的元素怎么办?宽度?那么你是否需要 container 或 row 或 col-md-12 ，为了整个页面在样式规则下显示良好Bootstrap 3 和 4?

附言如果可能，请指出或引用与此相关的官方 Bootstrap 文档.

解决方案

简短回答:你确实需要使用container，但是你不需要使用row.

您可以将元素直接放入container 或container-fluid.您不必要求使用网格(.row 和 .col-*)和容器单独使用 可以用作内容的容器.仅在需要响应式 12 单元结构时才使用网格.

例如，这是有效的 Bootstrap...

<h2>你好世界</h2><p class="lead">其他一些内容...</p>

来自 Bootstrap 文档...

<块引用>

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

因此，container 的目的有两个:1)容纳网格系统"，以及 2)包装站点内容".但是，当您确实使用网格(.row 和 .col-*)时，需要一个容器来包装 .行.

即使 基本入门模板 也使用了 container 而没有网格.

总结...

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

I think the standard of Bootstrap 3 and 4 is

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

But what if you have a div, table, form, or any element, that you plan to just let it span the whole width? Then do you need the container or row or col-md-12 at all, for the whole page to display well under the styling rules of Bootstrap 3 and 4?

P.S. if possible, please point to or quote the official Bootstrap docs related to this.

解决方案

Short answer: you do need to use container, but you don't need to use row.

You can put elements directly in the container or container-fluid. You aren't required to use the grid (.row and .col-*), and the container alone can be used as a container of content. Only use the grid when you need the responsive 12-unit structure.

For example, this is valid Bootstrap...

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

From the Bootstrap docs...

"Bootstrap requires a containing element to wrap site contents and house our grid system."

So, the purpose of container is two-fold: 1) to "house the grid system", and 2) to "wrap site contents". However, when you do use the grid (.row and .col-*), a container is required to wrap the .row.

Even the basic starter template utilizes container without the grid.

In summary...

• You can use .container or .container-fluid alone to contain elements and page content.
• If you use the grid (.row and .col-*), .row must be inside a .container or .container-fluid, and .col-* must be inside a .row.

这篇关于是否需要使用Bootstrap的“容器"?和“行"如果您的内容要跨越整个宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！