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