while循环和引导

Question

我有问题来正确显示帖子。 Im用函数显示dinamicaly的内容。

功能在PHP是

function displayAllPosts() { 
global $connection; 

     $query = "SELECT * FROM blog_post "; 
     $run_query = mysqli_query($connection,$query); 


     while ($row = mysqli_fetch_array ($run_query)){ 

     $post_title = $row ['post_title']; 
     $post_desc = $row ['post_desc']; 
     $post_img = $row ['post_img']; 


     echo " 




     <div class='col-md-3 col-sm-6'> 
     <div class='feature-center text-center animate-box' data-animate-effect='fadeIn'> 

     <img class='image-responsive' width='100%' src='$post_img'/><hr> 
     <h2>{$post_title}</h2><hr> 
     <p>{$post_desc} </p> 
     <a href='#'><button type='button' class='btn btn-info' style='width:100%'>Categoty Title</button></a> 
     </div> 
     </div> 

     "; 

     } 

} 

和这样的页面看起来像这样： page

上smaler设备会连续显示2列。我徘徊是否可以插入

<div class='clearfix'></div> 

后显示2列？

Answer 1

我找到解决办法：

$count=0; 
     while ($row = mysqli_fetch_array ($run_query)){ 

     $post_title = $row ['post_title']; 
     $post_desc = $row ['post_desc']; 
     $post_img = $row ['post_img']; 


     echo " 

     <div class='col-md-3 col-sm-6'> 
     <div class='feature-center text-center animate-box' data-animate-effect='fadeIn'> 

     <img class='image-responsive' width='100%' src='$post_img'/><hr> 
     <h2>{$post_title}</h2><hr> 
     <p>{$post_desc} </p> 
     <a href='#'><button type='button' class='btn btn-info' style='width:100%'>Categoty Title</button></a> 
     </div> 
     </div> 

     "; 
     $count++; 
     switch ($count){ 


     case ($count % 4 == 0)  ; 
     echo "<div class='clearfix visible-lg-block visible-md-block'></div>";   
     break  ; 

     case ($count % 2 == 0 && $count % 4 !==0) ; 
     echo "<div class='clearfix visible-sm-block'></div>"; 
     break  ; 

       } 

     }