Bootstrap 中 .row 的用途是什么？ [复制]答案

【问题标题】：What is the purpose of .row in Bootstrap? [duplicate]Bootstrap 中 .row 的用途是什么？ [复制]
【发布时间】：2017-02-19 00:24:31
【问题描述】：

根据Bootstrap's documentation

行必须放在.container（固定宽度）或.container-fluid（全宽度）内

和

使用行来创建水平列组。

为什么需要这样做？

.row 只能占据.container 或.container-fluid 的最大宽度

鉴于您必须关闭.row，所以写起来似乎更长：

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h1>Column A</h1>
        </div>
        <div class="col-md-6">
            <h1>Column B</h1>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <h1>Column C</h1>
        </div>
        <div class="col-md-6">
            <h1>Column D</h1>
        </div>
    </div>
</div>

比这个：

<div class="container">
    <div class="col-md-6">
        <h1>Column A</h1>
    </div>
    <div class="col-md-6">
        <h1>Column B</h1>
    </div>
 </div>

<div class="container">
    <div class="col-md-6">
        <h1>Column C</h1>
    </div>
    <div class="col-md-6">
        <h1>Column D</h1>
    </div>
</div>

【问题讨论】：

一个.container 可以包含多个row。例如，您希望有一个 row 和 3 个 cols 和一个有 5 个 cols。每组cols 将它们包装在row 中，然后将rows 包装在container 中。这是关于分离物品并具有整洁的结构。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

容器

容器提供响应宽度的宽度限制。当响应大小改变时，改变的是容器。行和列都是基于百分比的，因此它们不需要更改。请注意，每边都有 15px 的边距，按行取消。

行

行应始终位于容器中。

行为列提供了一个居住的地方，理想情况下，列的总和为 12。它还充当包装器，因为所有列都向左浮动，当浮动变得奇怪时，其他行不会重叠。

行的每边也有 15 像素的负边距。组成该行的 div 通常会被限制在容器的填充内，接触粉红色区域的边缘但不会超出。 15px 的负边距将行推到容器 15px 填充的顶部，基本上否定了它。此外，行确保您在其中的所有 div 都出现在自己的行上，与前一行和后一行分开。

列

列现在有 15 像素的填充。这种填充意味着列实际上接触了行的边缘，行本身接触容器的边缘，因为行具有负边距，而容器具有正填充。但是，列上的填充将列内的任何内容推到它需要的位置，并且还提供了列之间的 30px 间距。永远不要在行之外使用列，它不会起作用。

更多信息，我建议你阅读this article。讲的很清楚，也很好的解释了Bootstrap的网格系统是如何工作的。

【讨论】：

虽然容器有全宽，但行通常指定max-width。除了行也清除内部浮动，还有很多其他的事情你可以考虑，作为背景图像，内部元素的进一步定位等。不是必需的，也许不是必需的，但在框架中计划和推荐。
@Mistalis 感谢您的详细解释。您提供的文章的链接非常好。如果他们有同样的问题，我建议任何人阅读那篇文章。那里的图表非常有用。
不错的答案，除了“理想情况下，列加起来为 12”有点误导，因为Bootstrap has column wrapping。

【解决方案2】：

.row 元素的两边都有负边距。所有的列都有一个用于处理间距的填充，即使是第一个和最后一个（这是我们不想要的），所以 .row 将它们拉回来以解决这个问题。另外，我认为容器中包含更多行而不是列更有意义。

【讨论】：