css - bootstrap 中每行超过 12 列

Question

我将在 bootstrap 3.2.0 中检查每行 12 列，并根据 bootstrap 和 this post这完全没问题。

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

我遇到的问题是，当我使用 4 col-md-4 时，我得到了右边的第 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>

如果我添加第 5 个甚至第 6 个，所有内容都会很好地漂浮到左侧，如下图所示。

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

有什么想法吗？

Answer 1

这张图给了你答案。

看，正如您所说，Bootstrap 将列 float 到左侧。 float 模型意味着元素将 float 到左侧以阻止下一个元素的流动。因此，在你的第一张图片中，看看你的第二列，第一行是如何稍微长一点的，并且可能有一些边距和填充，这阻碍了下一行中元素的流动。在第二张图片中你看不到它，因为长元素在旁边。最好的症状描述是你自己给出的:

I am generating this content through a wordpress loop in a custom shortcode, and I noticed that somehow if I remove this line in the Shortcode function the columns float just fine as in this jsFiddle:

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

给你。摘录在包含 block 的长度上以某种方式“随机”，因此您的问题几乎每天都会发生在任何 WP 开发人员身上。有许多不同的方法可以解决它，但最简单的方法是:

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

瞧，问题解决了!