bootstrap 3/4列的第二行之后的第三行破解

我正在使用bootstrap wordpress设计，并且我使用一些PHP来输出帖子。bootstrap 3/4列的第二行之后的第三行破解

然而，无论是col-3，col-4还是col-2，我都会得到一个单独的投资组合项目，然后正确的列将返回。

这里是我的代码：

<article id="post-<?php the_ID(); ?>" <?php post_class('col-lg-4 col-sm-4 pbox'); ?>> 

    <?php 
     $thumb = get_post_thumbnail_id(); 
     $img_url = wp_get_attachment_url($thumb,'full'); //get full URL to image (use "large" or "medium" if the images too big) 
     $image = aq_resize($img_url, 720, 560, true); //resize & crop the image 
    ?> 

    <?php if($image) : ?> 
    <a href="<?php the_permalink(); ?>"> <img class="img-responsive" src="<?php echo $image ?>"/></a> 
    <?php endif; ?> 

    <h2 class="box-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2> 
    <div class="box-meta"><?php the_category(', '); ?></div>  
    <div class="entry-summary"> 
     <?php the_excerpt(); ?> 
    </div><!-- .entry-summary -->

这里是我的问题的图形示例： - http://i.stack.imgur.com/xMFQY.png

附加CSS：

.pbox{margin-bottom: 30px;}

感谢您的帮助！

来源

2014-09-03 Douglife

回答你的问题如果你想得到更详细的帮助，请发布你的PHP代码生成的HTML，以便我可以提供给你以一个工作示例 – Fizzix 2014-09-03 00:57:22

或者您可以将生成的html和CSS复制/粘贴到bootply http ：//www.bootply.com/并找出错误的地方。 bootply是练习引导相关问题的最佳场所。 – Raf 2014-09-03 00:58:54

我曾经有过同样的问题，这是因为每列有不同的高度。我分配了一个固定的柱高，事情开始看起来不错。这里是我的帖子里面没有人回答，直到我想通了，我自己https://drupal.stackexchange.com/questions/119009/responsive-bootstrap-grid-with-6-columns-of-equal-heights

请参见下面的测试中，我所做的仅仅是现在（第二排，第三列是200x190，其他一切都是200×200）

enter image description here 200x190导致最后一个div移动到右侧。但是，如果我们指定一个固定的高度，以每格，然后一切看起来都很正常如下（第二排第三格还是200x190

，现在下面

enter image description here

所以我建议只为测试目的，增加高度：200px;到你的.pbox，看看会发生什么

来源

2014-09-03 00:57:23 Raf

谢谢Raf，给.pbox类添加高度：560px已经解决了这个问题，并且只是为了澄清@fizzix上面陈述的内容，哪个更合适？ – Douglife 2014-09-03 01:53:37

要么可以，我还没有尝试过他的解决方案，不知道它是如何工作的。当涉及到我的解决方案时，如果您担心所有设备的固定高度，那么您可以通过为不同的视口提供不同的固定宽度来解决这个问题，例如，大屏幕560像素，中画面360像素等等。我的解决方案为我工作完美无瑕。有关Media Quries的信息，请参阅http://getbootstrap.com/css/#grid，不要忘记标记任何适用于您的解决方案*** *** *** – Raf 2014-09-03 09:04:14

看起来好像它是一个漂浮物的问题。

我建议补充说，更是打破了以下前之一：

<div class="clearfix"></div>

这是一个建在清除所有彩车自举类。

如果你只喜欢它在某些应用宽度，请尝试以下操作：

<div class="clearfix hidden-xs"></div>

你可以看到的响应公用事业here列表。

来源

2014-09-03 00:54:24 Fizzix