php - 如何使用 Bootstrap 和 SQL 查询在循环中连续显示 4 列

Question

我想使用 Bootstrap 为每一行显示 4 个图像的 SQL 查询结果。我如何使用 PHP 中的循环来实现？

<div class="row">
   <?php 
        $query = "SELECT * FROM table WHERE nombre='x' ORDER BY nombre";
        $consulta = mysql_query($query, $conexion);

        while ($data = mysql_fetch_assoc($consulta)) { ?>

        <div class='col-md-3 portfolio-item'>
            <a href='img/<?php echo $data['imagen']; ?>'>
                <img class='img-responsive' src='img/<?php echo $data['imagen']; ?>' alt='<?php echo $data['nombre']; ?>'>
            </a>
            <div class='panel panel-default'>
                <div class='panel-body'>
                    <?php echo $data['nombre']; ?>
                </div>
            </div> 

        </div> 
    <?php } ?> 
</div>

Answer 1

关闭并打开一个新的行 -

    <div class="row">
       <?php 
            $query = "SELECT * FROM table WHERE nombre='x' ORDER BY nombre";
            $consulta = mysql_query($query, $conexion);
            $i = 1;
            while ($data = mysql_fetch_assoc($consulta)) { ?>

            <div class='col-md-3 portfolio-item'>
                <a href='img/<?php echo $data['imagen']; ?>'>
                    <img class='img-responsive' src='img/<?php echo $data['imagen']; ?>' alt='<?php echo $data['nombre']; ?>'>
                </a>
                <div class='panel panel-default'>
                    <div class='panel-body'>
                        <?php echo $data['nombre']; ?>
                    </div>
                </div> 

            </div> 
        <?php 
            if($i % 4 === 0) echo "</div><div class='row'>"; // close and open a div with class row

            $i++; // increment
        } 
        ?> 
    </div>