Bootstrap中"class=row"的含义是什么？它与容器有何区别？如何将其与"class=col-***-*"一起使用？

Question

我正尝试按照这里的指南进行操作：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>

我尝试了使用带有div和不带div的行，我想把所有东西都放在一个容器里面，但是它们看起来完全相同。请问"row"类的含义是什么？

- anonymous

---

基本上，区别在于边距和填充：例如，请参见此处。 （对于不同类型的容器还有更多不同之处...请参见文档）。 - seven-phases-max

Answer 1

在Bootstrap中，“row”类主要用于容纳其中的列。Bootstrap将每行划分为12个虚拟列的网格。在以下示例中，col-md-6 div的宽度将是“row” 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>

- Asaf David

---

如果你不将那些div放入一个row中会发生什么？我尝试运行了一遍有和没有row包装器的示例，但是我看不出任何区别。 - anonymous

不完全正确。所有的“col-…”div都是浮动在左侧或右侧的，因此如果它们比父元素高，它们会“溢出”它。这种情况可能会导致视图中元素重叠。一个简单的修复方法是使用“row”类为您创建一个“clearfix”，这将使父元素根据其子元素生成高度，无论它们是否浮动。 - Asaf David

我注意到 row 类实现了 margin-left: -15px；margin-right: -15px，我认为这与某些修复相关，这些修复与 col 具有 padding-left: 15px; padding-right: 15px 有关。 - Yuval A.

Answer 2

我喜欢把行看作是一个容器，可以包含X个等于12的列。您可以使用行类来分隔不同的堆叠元素（列）。

您定义的列col-xs-12 col-md-8意味着在中型屏幕及以上大小时，div将跨越页面的8/12，并且在xs小屏幕（移动设备）上它将占用全部12列。这与col-xs-12 col-md-4类一起使用，因为8 + 4 = 12。

如果您的整个网站都按此方式分割（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>

容器类用于在整个网站周围创建一个漂亮的边距，但如果您想要跨越整个宽度的网站部分，您需要关闭容器并创建一个container-fluid类。然后再创建另一个容器来恢复边距。希望这一切都很清楚！这就是我的思考方式。

- Benneb10

Answer 3

这里可以看到 row class 的区别。Row 类似于容器，是应用于元素的类。

P.S: run the snippet in full view

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

- Lucky Chingi

---

我不是给你的回答点踩的人，但是这个回答不太清晰；在你的演示中，所有三个容器看起来都一样。 - TylerH

谢谢@TylerH。我想我应该提到在完整视图中运行代码片段 :) - Lucky Chingi

我看到了“仅容器”和“容器和行”之间的细微差别，但我无法准确指出这个差别是什么？我只能看到左边有一个小的内边距。 - anonymous

@HayNHasida 容器在左右两侧填充了15像素。添加row类可以抵消填充并使布局内联。这在进行复杂布局时特别有用。 - Lucky Chingi