html - Bootstrap 中 .row 的用途是什么？

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

<分区>

根据 Bootstrap's documentation

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width)

和

Use rows to create horizontal groups of columns.

为什么这是必要的？

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

最佳答案

容器

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

行

行应该总是在一个容器中。

该行为列提供了一个存放的地方，理想情况下列数加起来为 12。它还充当包装器，因为所有列都向左浮动，当 float 变得奇怪时，其他行不会重叠。

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

列

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

有关更多信息，我建议您阅读this article .非常清楚，很好地解释了 Bootstrap 的网格系统是如何工作的。

关于html - Bootstrap 中 .row 的用途是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42876553/