bootstrap - wordpress grid

Question

我使用bootstrap製作wp自定義主題。我實施了一個網格來顯示最新的帖子。我想在一個較大的屏幕上顯示4個項目（下至768px = col-sm-3），然後每行顯示2個項目（col-xs-6）。它有點作品，但在某些時候項目不能正常顯示。特別是，當屏幕寬度在1200 - 768之間或小於579時，每4箇中有一行被打破，只顯示1個項目（請參閱圖像）。我不確定問題出在哪裏。

我讀到了.cleardiv類，但我不明白我該把它放在哪裏。

你可以看到網站here。 （請注意，具有4個項目的第一行工作正常，因爲它在另一行中的其他12之前生成）。只需點擊「v」箭頭即可顯示出現問題的行。 感謝

<section class="bg-white" id="in_evidenza"> 
    <div class="container"> 
     <!-- this is the first row which is always visible. no issue here --> 
     <div class="row"> ... 
     </div> 
     <!-- second row: issue here --> 
     <div class="row" id="news-content"> 
      <?php 
      $args = array('numberposts' => '12', 'category_name' => 'news', 'orderby' => 'date', 'offset' => '4'); 
      $recent_posts = wp_get_recent_posts($args); 
      $i = 1; 
      foreach($recent_posts as $recent): 
       $post_img_src = "http://www.assatena.it/testbs/wordpress/wp-content/uploads/2016/03/".$i.".png"; 
       $post_title = $recent["post_title"]; 
       $post_id = $recent["ID"]; 
       $post_content = get_post_field('post_content', $post_id); 
       $post_date = get_the_date("d/m/Y", $post_id); 

       if(strlen($post_title) >= 19){ 
        $post_title_short = substr($post_title, 0, 19); 
        $post_title_short.="..."; 
       }else 
       $post_title_short = $post_title; 

       $teaser = substr(strip_tags($post_content), 0, 66); 
       $teaser.=" . . ."; 

      ?> 
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6" id="col-news-all"> 
       <div class="text-center"> 
        <img class="img-rect" width="160" height="100" alt="" src='<?php echo $post_img_src; ?>' /> 

        <h3><?php echo $post_title_short; ?></h3> 
        <p> 
         <?php echo $teaser; ?> 
         <br> <!-- open --> 
         <a data-toggle="modal" href="" data-target="#modal-news-<?php echo $post_id; ?>"> 
          <span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span> 
         </a> 
        </p> 
       </div> 
      </div> 
      <div id="modal-news-<?php echo $post_id; ?>" class="modal fade in" aria-hidden="false" role="dialog" tabindex="-1"> 
       <div class="modal-content"> 
        <div class="container"> 
         <div class="row"> 
          <div class="col-lg-10 col-lg-offset-1"> 
           <div class="modal-body"> 
            <h2><?php echo $post_title; ?></h2> 
            <p class="post_date">- <?php echo $post_date; ?> -</p> 
            <hr class="star-primary"> 
            <img id="news_img" class="img-responsive img-modal" alt="News img" src="<?php echo $post_img_src; ?>" /> 
            <div class=" text-left"> 
             <div class="my_post_content"> 
              <p><?php echo $post_content; ?></p> 
             </div> 
            </div> 
            <div class="text-center"> <!-- close --> 
             <a data-dismiss="modal" class="btn btn-success btn-xl ">Chiudi</a> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <?php 
      $i%=4; 
      $i++; 
      endforeach; 
      ?> 
     </div> <!-- row --> 
     <div class="text-center"> 
      <a data-toggle="modal" href="" data-target=""> 
       <span id="news-all" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span> 
      </a> 
     </div> 
    </div> <!-- container --> 
</section> 

圖片：

Answer 1

您$i++寫之前if語句放置clearfix

<?php if ($i % 4 == 0); ?> 
<div class="clearfix"></div> 
<?php endif; ?> 

編輯：爲移動，你可以設置其他clearfix與$i % 2 == 0並隱藏它在桌面上通過visible-xs