超过 12 列的 Bootstrap 3 网格系统不会下降到新行

Question

我不知道我是否错了，但过去如果您的引导列添加到超过 12 个（默认值），其余的将下降到一个新的“行”。我现在使用的是 Bootstrap 3.x 所以理论上有这个：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

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

基本上和拥有这个一样：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
  <div class="col-xs-4">1</div>
  <div class="col-xs-4">2</div>
  <div class="col-xs-4">3</div>
</div>
<div class="row"> <!-- This would seem to 'drop' into a new row -->
  <div class="col-xs-4">1</div>
  <div class="col-xs-4">2</div>
  <div class="col-xs-4">3</div>
</div>

我正在使用 AngularJS v1.3.x 创建多列 4，希望它们在不同的行中对齐：

<div class="row">
    <div class="col-xs-4" ng-repeat="item in ['Lorem Ipsum..', 1, 2, 3...]">{{item}}</div>
</div>

但由于每列的高度不同（即“Lorem Ipsum..”和单个数字）。你可以看到在这个plunker 中发生了什么。他们没有让下一个 12 下降到一个新的行，而是以某种方式“重叠”，使它看起来很好，直到有一个差距。我想要的是实际上每 12 次下降到一个新行。

发生这种情况是否有任何特定原因？以及如何以某种方式使用 Angular，每 12 个（3 x col-xs-4 = 12）添加一行。作为额外的信息：数组是动态的，它永远不会同时保存相同数量的项目，这意味着我无法对其进行硬编码。

非常感谢任何想法，谢谢！

Answer 1

Responsive column resets

由于有四层网格可用，您一定会遇到这样的问题：在某些断点处，您的列并不能完全正确地清除，因为其中一层比另一层高。要解决此问题，请结合使用 .clearfix 和我们的 responsive utility classes。

基本上，它归结为浮动在 CSS/HTML 中的工作方式，特别是当浮动的项目具有不同的高度时。而且Bootstrap的grid是用float实现的，所以这个floating issue会影响到它。

针对您的特定情况的示例：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
    <div class="col-xs-4">1</div>
    <div class="col-xs-4">2</div>
    <div class="col-xs-4">3</div>
    <div class="clearfix"></div>
    <div class="col-xs-4">1</div>
    <div class="col-xs-4">2</div>
    <div class="col-xs-4">3</div>
</div>