我在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>
有任何想法吗？
解决方法
图像给你答案.
看,Bootstrap将列向左浮动,就像你说的那样. 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>';
你有.在包含块的长度中,摘录在某种程度上是“随机的”,所以你的问题几乎每天都会发生在任何WP开发人员身上.有许多不同的方法可以解决它,但最简单的方法是：
.col-md-4{min-height:400px /* test the height you need to enable normal flow of the floats */}
瞧,问题解决了！
