如何使用Bootstrap和SQL查詢連續顯示4列

Question

我想用Bootstrap顯示每行SQL查詢的4個圖像結果。我怎樣才能用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

關閉和打開一個新的row -

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