Bootstrap 中每行超过 12 列

我将在 bootstrap 3.2.0 中查看每行 12 列，并根据 bootstrap 和这个帖子 https://stackoverflow.com/questions/23535499/bootstrap-what-will-happen-if-i-put-more-than-12-columns-in-a-row这完全没问题。

如果单行中放置的列超过 12 列，则每组额外的列将作为一个单元换行到新行。

我遇到的问题是当我使用 4col-md-4我将第四列放在右侧，如下图所示。

<div class="row">
  <div class="col-md-4">
    <a href="#" title="Test">
      <img width="225" height="150" src="blog.jpg />
    </a>

    <h4>
      <a href="#" title="Test">Test</a>
    </h4>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus odio nisi, sodales nec commodo at, viverra eget eros. In hac habitasse platea dictumst. Sed semper […]</p><!-- EXCERPT -->

     <p><a href="#" title="Read More">Read More</a></p>
  </div>
  <div class="col-md-4">
      //Loop Repeats
  </div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>

如果我添加第五个甚至第六个，所有东西都会很好地向左浮动，如下图所示。

<div class="row">
  <div class="col-md-4">
     //Loop Repeats
  </div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>

有任何想法吗？

图片给你答案。

看，Bootstrap 将列向左浮动，正如您所说。浮动模型意味着该元素将向左浮动，阻塞下一个元素的流动。因此，在您的第一张图片中，请查看您的第二列、第一行稍长，并且可能有一些边距和填充，这会阻止下一行中元素的流动。在第二张图片中，您看不到它，因为长元件位于侧面。对症状的最佳描述是您自己给出的：

我正在通过自定义的 WordPress 循环生成此内容 短代码，我注意到如果我删除这一行 简码函数列浮动得很好，就像在这个 jsFiddle 中一样：

$output .= '<p>' . get_the_excerpt() . '</p>';

就这样，你就有了。摘录在包含块的长度上是“随机的”，所以你的问题几乎每天都会发生在任何 WP 开发人员身上。有很多不同的方法可以解决这个问题，但最简单的方法是：

.col-md-4{min-height:400px /* test the height you need to enable normal flow of the floats */}

瞧，问题解决了！