Bootstrap中.row的目的是什么？ [英] What is the purpose of .row in Bootstrap?

问题描述

根据 Bootstrap的文档

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

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

和

使用行创建横向列组。

为什么需要这样做？

.row 只能占用 .container 的最大宽度，或者 .container-fluid

A .row can only occupy the maximum width of either .container or .container-fluid

鉴于您必须关闭 .row 似乎写得更长：

Given that you have to close the .row it seems longer to write:

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

与此相比：

Than this:

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

推荐答案

集装箱

容器在响应宽度上提供宽度约束。当响应大小发生变化时，容器会发生变化。行和列都是基于百分比的，所以他们不需要改变。
请注意，每边有15px的保证金，被行取消。

The container provide the width constraints on responsive widths. When the responsive sizes change, it’s the container that changes. Rows and columns are all percentage based so they don’t need to change. Note that there is a 15px margin on each side, canceled by rows.

行

行应始终位于容器中。

该行为列提供了一个生活的地方，理想情况下有列加起来12.它也充当包装，因为所有的列向左浮动，当浮动变得怪异时，额外的行没有重叠。

The row provides the columns a place to live, ideally having columns that add up to 12. It also acts as a wrapper since all the columns float left, additional rows don’t have overlaps when floats get weird.

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

Rows also have a 15px negative margin on each side. The div that makes up the row would normally be constrained inside of the container's padding, touching the edges of the pink area but not beyond. The 15px negative margins push the row out over top of the containers 15px padding, essentially negating it. Furthermore, rows ensure you that all of the divs inside of it appear on their own line, separated from the previous and the following rows.

列

列现在有15px的填充。此填充意味着列实际上会触及行的边缘，该行本身会触及容器的边缘，因为该行具有负边距，并且容器具有正填充。但是，列上的填充将列内的任何内容推送到需要的位置，并且还在列之间提供30像素的装订线。不要在行外使用列，否则无法工作。

The columns now have 15px padding. This padding means that the columns actually touch the edge of the row, which itself touches the edge of the container since the row has the negative margin, and the container has the positive padding. But, the padding on the column pushes anything inside the column in to where it needs to be, and also provides the 30px gutter between columns. Never use a column outside of a row, it won’t work.

有关更多信息，我建议您阅读 这篇文章 。它非常清楚，并且很好地解释了Bootstrap的网格系统是如何工作的。

For more information, I suggest you to read this article. It is really clear, and explain well how Bootstrap's grid system works.

这篇关于Bootstrap中.row的目的是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！