如何对齐引导缩略图答案

【问题标题】：How to align bootstrap thumbnail如何对齐引导缩略图
【发布时间】：2017-07-17 14:35:34
【问题描述】：

我正在使用引导程序thumbnail。我想将它们对齐每行 3 个缩略图。请看一下图片。 这就是我想要发生的事情： (Please Click) 正如您在图片中看到的， thumbnail 每行对齐 3 个。但我现在拥有的是：(Please Click) 在图像上，它们每行对齐 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>

【问题讨论】：

你需要<div class="col-sm-6 col-md-3">之外的循环

标签： php html css twitter-bootstrap

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

【讨论】：