2016-11-20 3 views
1

投稿を正しく表示するには問題があります。 私は、機能のあるディナミカルなコンテンツを表示しています。 PHPでwhileループとブートストラップ

機能は

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列の後に?

答えて

0

私は解決策を見つけた:

$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  ; 

       } 

     }