while 循环和引导答案

【问题标题】：while loop and bootstrapwhile 循环和引导
【发布时间】：2017-04-04 02:07:13
【问题描述】：

我无法正确显示帖子。我用函数显示内容。

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

在较小的设备上，它将连续显示 2 列。我在徘徊是否可以插入

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

显示 2 列之后？

【问题讨论】：

标签： php loops twitter-bootstrap-3 while-loop

【解决方案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       ; 

                 }

        }

【讨论】：