Bootstrap中的"row"class是什么意思，和container的区别，和col-***-*怎么叠加？

Question

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

<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 和没有它的情况下都尝试过，我试图将所有内容都放在一个容器中，完全没有区别，它们看起来都一样。

谁能解释一下 "row" class 是什么意思？

Answer 1

可以在第 class 行中看出差异。像容器一样的行是应用于元素的 class。

P.S: 运行完整视图中的片段

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

Answer 2

在Bootstrap中，"row"class主要用来容纳其中的列。 Bootstrap div将每一行合并为一个包含 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>

Answer 3

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

您定义的列 col-xs-12 col-md-8 意味着在中等大小的屏幕上 div 将跨越页面的 8/12，在 xs 小屏幕上（移动）它将跨越完整的 12 列。这适用于 col-xs-12 col-md-4 class 因为 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>

容器 class 用于在整个网站周围创建一个不错的边距，但如果您的网站有一部分要跨越整个宽度，则需要关闭容器并创建一个容器流体 class。然后创建另一个容器以取回保证金。希望一切都使自！我怎么想的。

Bootstrap中的"row"class是什么意思，和container的区别，和col-***-*怎么叠加？

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

html

css

row

twitter-bootstrap