bootstrap - wordpress grid

Question

Я создаю специальную тему 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++ записи, если заявление Подставьте clearfix

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

EDIT: для мобильного вы можете установить другой clearfix с $i % 2 == 0 и скрыть его в рабочих столах через visible-xs