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

Question

我在bootstrap 3.2.0中每行12列,并根据bootstrap和这篇文章,这是完全正常的.

如果在一行中放置超过12列,则每组额外列将作为一个单元包裹到新行上.

col-md-4我遇到的问题是,当我使用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模型意味着元素将浮动到左边,阻塞下一个元素的流.因此,在您的第一张图片中,看看您的第二列,第一行是如何稍长,并且可能有一些边距和填充,这阻止了后续行中元素的流动.在第二张图片中,您看不到它,因为长元素位于侧面.并且您自己给出了症状的最佳描述:

我通过自定义短代码中的wordpress循环生成这个内容,我注意到,如果我在Shortcode函数中删除这一行,那么列浮动就好了,就像在这个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 */}

瞧,问题解决了!