如何對齊引導縮略圖

Question

我正在使用bootstrap thumbnail 。 我想將它們對齊每行3個縮略圖 。 請看一下圖片。 這就是我要發生的事情：（ 請單擊） 如您在圖像上看到的， thumbnail每行對齊3個。 但是我現在所擁有的是：（ 請單擊） 在圖像上，它們每行對齊1個 。 請注意，我顯示了來自數據庫的卡車圖片和標簽。 我只想將它們對齊為每行3個thumbnails 。 非常感謝您的幫助。 這是我的代碼 ：

 <!-- IMAGE THUMBNAIL START -->
 <div class="row">

 <div class="col-sm-2"></div>
 <div class="row">
 <div class="col-sm-6 col-md-3">
  <?php 
   include 'configmysqli.php';
   $query = "SELECT * FROM trucks ORDER BY TRUCK_TYPE ASC";
   $result = mysqli_query($connect, $query);
   while($row = mysqli_fetch_array($result))
    {
    ?>

   <div class="thumbnail">  
   <img src="<?=$row['TRUCK_PHOTO']?>" height="242" width="200" class="img-
      responsive img-rounded" alt="">
   <div class="caption">
   <form action="requesttruck.php" method="post" enctype="multipart/form-
     data">
    <h3><?=$row['TRUCK_TYPE']?></h3>
         <input type="text" name="companynum" hidden="true" value="<?
          =$row['COMPANY_NUM']?>">
         <input type="text" name="trucktype" hidden="true" value="<?
          =$row['TRUCK_TYPE']?>">

      <button class="btn btn-primary" name="request">Request</button>
      <button class="btn btn-default" name="view">View</button>
  </form>
 </div> <!-- caption -->
</div> <!-- thumbnail -->

<?php
}
?>
</div> <!-- col -->
</div> <!-- row -->
<div class="col-sm-2"></div>
</div>

Answer 1

您的while需要將正在生成的列括起來，否則，您將只在一個列中生成所有內容。

請注意，您最終可能最終需要兩個循環。 一種生成行，另一種生成列（每個縮略圖）。

 <div class="row">

  <?php 
   include 'configmysqli.php';
   $query = "SELECT * FROM trucks ORDER BY TRUCK_TYPE ASC";
   $result = mysqli_query($connect, $query);
   while($row = mysqli_fetch_array($result))
    {
    ?>
<div class="col-sm-6 col-md-3">
   <div class="thumbnail">  
   <img src="<?=$row['TRUCK_PHOTO']?>" height="242" width="200" class="img-
      responsive img-rounded" alt="">
   <div class="caption">
   <form action="requesttruck.php" method="post" enctype="multipart/form-
     data">
    <h3><?=$row['TRUCK_TYPE']?></h3>
         <input type="text" name="companynum" hidden="true" value="<?
          =$row['COMPANY_NUM']?>">
         <input type="text" name="trucktype" hidden="true" value="<?
          =$row['TRUCK_TYPE']?>">

      <button class="btn btn-primary" name="request">Request</button>
      <button class="btn btn-default" name="view">View</button>
  </form>
 </div> <!-- caption -->
</div> <!-- thumbnail -->
</div> <!-- col -->
<?php
}
?>

</div> <!-- row -->