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>

VS

<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课程，则当列不具有相同的高度时，您可能会遇到浮动问题。

以下是一个例子：

＆＃13;

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

＆＃13;

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

＆＃13;

正如您所看到的，第一个col-xs-4正在推动第二行中的那些并产生问题，这是因为我们不清楚浮动。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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，因此两个配置的行为完全相同：

＆＃13;

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

＆＃13;

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

＆＃13;

Bootstrap中的一行与多行

1 个答案: