Html Bootstrap 中的“row”类是什么意思，它与容器的区别，以及它如何与 col-***-* 堆叠？

What's the meaning of the "row" class in Bootstrap, its difference from containers, and how does it stack with col-***-*?

提问by anonymous

I'm trying to follow the guide here: http://getbootstrap.com/css/and I just can't seem to understand what the "row" class is doing. I was trying some of the examples in the guide such as:

我正在尝试按照此处的指南进行操作：http: //getbootstrap.com/css/，但我似乎无法理解“row”类在做什么。我正在尝试指南中的一些示例，例如：

<div class="row">
    <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

I tried it with the row divand without it, and I was trying to place everything inside a container, and there was no difference at all, they all looked the same.

我尝试了有排div和没有排的情况，我试着把所有东西都放在一个容器里，没有任何区别，它们看起来都一样。

Could anyone explain what the meaning of the "row" class is ?

任何人都可以解释“行”类的含义是什么？

回答by Asaf David

In Bootstrap, the "row" class is used mainly to hold columns in it. Bootstrap divides each row into a grid of 12 virtual columns. In the following example, the col-md-6div will have the width of 6/12 of the "row"s div, meaning 50%. The col-md-4will hold 33.3%, and the col-md-2will hold the remaining 16.66%.

在 Bootstrap 中，“row”类主要用于保存其中的列。Bootstrap 将每一行分成 12 个虚拟列的网格。在以下示例中，col-md-6div 的宽度为“row”s div 的 6/12，即 50%。在col-md-4将持有33.3％，而col-md-2将持有剩余的16.66％。

<div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-4"></div>
    <div class="col-md-2"></div>
</div>

回答by Benneb10

I like to think of the row as a container that can contain X many columns equal to 12. You would use the row class to separate different stacked element (columns).

我喜欢将行视为一个容器，它可以包含 X 多个等于 12 的列。您可以使用行类来分隔不同的堆叠元素（列）。

The columns as you defined them col-xs-12 col-md-8 mean that on a medium sized screen and above the div will span 8/12 of the page and on a xs small screen (mobile) it will span the full 12 columns. This works with the col-xs-12 col-md-4 class because 8 + 4 = 12.

您定义的列 col-xs-12 col-md-8 意味着在中等大小的屏幕上，div 将跨越页面的 8/12，在 xs 小屏幕（移动）上它将跨越整个 12列。这适用于 col-xs-12 col-md-4 类，因为 8 + 4 = 12。

If your entire site is split this way (8/12 and 4/12) then all you really would need is one row! Other wise you'd create another row for different column width. An example would be:

如果您的整个站点以这种方式拆分（8/12 和 4/12），那么您真正需要的只是一行！否则，您将为不同的列宽创建另一行。一个例子是：

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-8"></div>
        <div class="col-xs-12 col-sm-4"></div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-4"></div>
        <div class="col-xs-12 col-sm-2"></div>
        <div class="col-xs-12 col-sm-6"></div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-3"></div>
        <div class="col-xs-12 col-sm-3"></div>
        <div class="col-xs-12 col-sm-3"></div>
        <div class="col-xs-12 col-sm-3"></div>
    </div>
</div>

The container class is used to create a nice margin around your entire site, but if you have a portion of your site you want to span across the entire width, you would need to close the container and create a container-fluid class. Then create another container to get the margin back. Hope that all makes since! Just how I think about it as.

容器类用于在整个站点周围创建一个很好的边距，但是如果您想要跨越整个宽度的站点的一部分，则需要关闭容器并创建一个容器流体类。然后创建另一个容器以取回保证金。希望一切自成！就是我怎么想的。

回答by Lucky Chingi

The difference can be seen here with row class. Row like container is a class applied to the element.

在这里可以看到行类的区别。Row like container 是应用于元素的类。

P.S: run the snippet in full view

PS：在全视图中运行代码段

.color {
  background: #cfcfcf
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />

<div class='color container'>
  Container only
</div>

<p>
  <div class='color container-fluid'>
    <div class=row>
      Fluid Container & row

    </div>
  </div>
  <p>

    <div class='color container'>
      <div class=row>
        Container & Row

      </div>
    </div>