html - Bootstrap 中的一行与多行

Question

假设我想要 6 列，每列跨越 Bootstrap 中的 4 个网格列。在功能方面，两者之间是否存在差异:

...

<div class="row">
  <div class="col-xs-4">
  <div class="col-xs-4">
  <div class="col-xs-4">
  <div class="col-xs-4">
  <div class="col-xs-4">
  <div class="col-xs-4">
</div>

对比

<div class="row">
  <div class="col-xs-4">
  <div class="col-xs-4">
  <div class="col-xs-4">
</div>
<div class="row">
  <div class="col-xs-4">
  <div class="col-xs-4">
  <div class="col-xs-4">
</div>

如果我在单个 Bootstrap 行中放置超过 12 个网格列，会有任何副作用吗？据我了解，如果每个新列不适合现有的 12 网格列，它会自动进入一个新行。

我正在使用 Bootstrap 3.3.7。

Answer 1

看起来没有区别但是实际上有很大的区别，这是由于 float 。当仅使用一个 row 类时，当列的高度不同时，您可能会遇到 float 问题。

这是一个例子:

.col-xs-4 {
  border: 1px solid;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-xs-4"> lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem</div>
    <div class="col-xs-4">lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem</div>
    <div class="col-xs-4">lorem ipsuem lorem ipsuem lorem </div>
    <div class="col-xs-4">lorem ipsuem lorem ipsuem lorem ipsuem </div>
    <div class="col-xs-4">lorem ipsuem lorem ipsuem lorem ipsuem </div>
    <div class="col-xs-4">lorem ipsuem lorem ipsuem lorem ipsuem </div>
  </div>
</div>

如您所见，第一个 col-xs-4 将第二行中的那些插入并产生问题，这是因为我们没有清除 float 。

但是如果你考虑第二种配置，我们不会有这个问题，因为它们是分开的:

.col-xs-4 {
  border: 1px solid;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-xs-4"> lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem</div>
    <div class="col-xs-4">lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem</div>
    <div class="col-xs-4">lorem ipsuem lorem ipsuem lorem </div>
  </div>
  <div class="row">
    <div class="col-xs-4">lorem ipsuem lorem ipsuem lorem ipsuem </div>
    <div class="col-xs-4">lorem ipsuem lorem ipsuem lorem ipsuem </div>
    <div class="col-xs-4">lorem ipsuem lorem ipsuem lorem ipsuem </div>
  </div>
</div>

所以这两种配置在某些情况下可以提供相同的输出，但由于 float ，它们的行为不同。

这里有一些相关的问题来获得更多的细节:

Floated elements of variable height push siblings down

Bootstrap row with columns of different height

Why is my Bootstrap column centered instead of left-aligned?

---

在 Bootstrap 4 中不再有这个问题，因为这个版本依赖于 flex，因此两种配置的行为完全相同:

.col-4 {
  border: 1px solid;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
first one
<div class="container">
  <div class="row">
    <div class="col-4"> lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem</div>
    <div class="col-4">lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem</div>
    <div class="col-4">lorem ipsuem lorem ipsuem lorem </div>
  </div>
  <div class="row">
    <div class="col-4">lorem ipsuem lorem ipsuem lorem ipsuem </div>
    <div class="col-4">lorem ipsuem lorem ipsuem lorem ipsuem </div>
    <div class="col-4">lorem ipsuem lorem ipsuem lorem ipsuem </div>
  </div>
</div>
second one
<div class="container">
  <div class="row">
    <div class="col-4"> lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem</div>
    <div class="col-4">lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem</div>
    <div class="col-4">lorem ipsuem lorem ipsuem lorem </div>
    <div class="col-4">lorem ipsuem lorem ipsuem lorem ipsuem </div>
    <div class="col-4">lorem ipsuem lorem ipsuem lorem ipsuem </div>
    <div class="col-4">lorem ipsuem lorem ipsuem lorem ipsuem </div>
  </div>
</div>