Question

行必须放在.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>

Answer 1

<强>容器

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

<强>行

行应始终位于容器中。

该行为列提供了一个可以存活的位置，理想情况下具有最多为12的列。它还充当包装器，因为所有列都向左浮动，当浮点数变得奇怪时，其他行没有重叠。

每行的负余量也为15px。组成行的div通常会被约束在容器的填充区内，触及粉红色区域的边缘但不会超出。 15px负边距将行推出容器15px填充顶部，基本上否定了它。此外，行确保它内部的所有div都显示在它们自己的行上，与前一行和后一行分开。

<强>列

列现在有15px填充。这种填充意味着列实际上接触行的边缘，该行本身接触容器的边缘，因为行具有负边距，并且容器具有正填充。但是，列上的填充将列中的任何内容推送到需要的位置，并且还在列之间提供30px的装订线。切勿在一行外使用列，否则无效。

有关详情，建议您阅读this article。它非常清楚，并且很好地解释了Bootstrap的网格系统是如何工作的。

Answer 2

.row元素两边都有负边距。所有的列都有一个填充来处理间距，甚至是第一个和最后一个（这是我们不想要的东西）所以.row将它们拉回去修复它。另外，我认为在容器中有更多行而不是列更有意义。

.row在Bootstrap中的目的是什么？

2 个答案: