Question

我在bootstrap 3.2.0中每行超过12列，根据bootstrap和this post，这完全没问题。

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

我遇到的问题是当我使用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>

Boostrap with 4 Col-md-4

如果我添加第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>

Boostrap with 5 Col-md-4

任何想法？

Answer 1

图片给你答案。

请参阅，Bootstrap将列向左浮动，就像你说的那样。 float模型意味着元素将浮动到左边，阻塞下一个元素的流。因此，在您的第一张图片中，看看您的第二列，第一行是如何稍长，并且可能有一些边距和填充，这阻止了后续行中元素的流动。在第二张图片中，您看不到它，因为长元素位于侧面。对症状的最佳描述由您自己给出：

我通过自定义中的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 */}

瞧，问题解决了！

Answer 2

包装问题正在发生，因为您的列的内容是不同的高度，导致＆＃34;间隙＆＃34;在网格中。您可以在每个X列上迭代并使用clearfix DIV，或者您可以使用仅限CSS的解决方案，就像这样..

http://codeply.com/go/BGSOAQi72l

@media (min-width: 992px) {
    .row > .col-md-4:nth-child(3n+1) {
        clear: left;
    }
}

从992px断点开始的地方开始使用md。 Read more on when to use Bootstrap's row class

更多详情：Bootstrap row with columns of different height

Answer 3

另一种解决方法：

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="clearfix custom-class"> <!-- Before the loop starts again -->
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>

然后添加一些CSS，使其仅以中等屏幕尺寸开始可见

.custom-class { 
  display: none;
}

@media (min-width: @screen-md) {
  .custom-class {
    display: block;
  }
}

这样就不需要预先确定块的最小高度，并且工作得很好

引导程序中每行超过12个cols

3 个答案: