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

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

下面是一个例子：

.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是推动第二行中的那些并创建一个问题，这是因为我们没有清除浮动。

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

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

因此，两种配置在某些情况下都可以提供相同的输出，但由于浮动，它们的行为有所不同。

以下是一些相关问题以获取更多详细信息：

可变高度的浮动元素将兄弟姐妹推下

具有不同高度的列的 Bootstrap 行

为什么我的 Bootstrap 列居中而不是左对齐？

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