将PHP图像问题转换为Bootstrap缩略图显示

Question

帮助我使用此代码PHP和bootstrap请参阅图像。

<?php 
$sql = "SELECT * FROM article ORDER BY article_id DESC"; 
$r = page_query($link, $sql, 10); 
while ($a = mysqli_fetch_array($r)) { 
    $src = "images/cover-image.jpg"; 
    if ($a['image_id'] != 0) { 
    $src = "read-image.php?id={$a['image_id']}"; 
    } 
    echo ' 
    <div class="row"> 
    <div class="col-lg-3 col-sm-6"> 
     <div class="thumbnail"> 
     <div class="thumb"> 
      <img src="' . $src . '" alt=""> 
      <div class="caption-overflow"> 
      <span> 
       <a href="' . $src . '" data-popup="lightbox" class="btn border-white text-white btn-flat btn-icon btn-rounded"><i class="icon-plus3"></i></a> 
       <a href="#" class="btn border-white text-white btn-flat btn-icon btn-rounded ml-5"><i class="icon-link2"></i></a> 
      </span> 
      </div> 
     </div> 
     <div class="caption"> 
      <h6 class="no-margin-top text-semibold"> 
      <a href="#" class="text-default">Not rapturous</a> 
      <a href="#" class="text-muted"><i class="icon-download pull-right"></i></a> 
      </h6> 
      ' . mb_substr($a['article_text'], 0, 120, 'utf-8') . '...<br>' . ' 
     </div> 
     </div> 
    </div>'; 
    } 

if (page_total() > 1) { 
    echo '<p id="page">'; 
    page_echo_pagenums(); 
    echo '</p>'; 
} 
?> 

图片

我使用此代码PHP和引导上看到的部分图像
这种问题如何不得不修改它如何显示正确的结果。

Answer 1

我发现了什么是：

1. 你打开<div class="row">。但是，没有关闭。 （这可能是未能正确对齐的原因之一）
2. 而且，我的建议是不要使用<div class="row">里面的while循环。将它放置在while之上。由于while循环中的每一次出现，它都会以单独的row作为整个div。将它放在while循环之前，它将帮助您将所有col-lg-3行排列在<div class="row">的正确对齐位置。

更新的代码：

<div class="row"> 
    <?php 
    $sql = "SELECT * FROM article ORDER BY article_id DESC"; 
    $r = page_query($link, $sql, 10); 
    while ($a = mysqli_fetch_array($r)) { 
    $src = "images/cover-image.jpg"; 
    if ($a['image_id'] != 0) { 
     $src = "read-image.php?id={$a['image_id']}"; 
    } 
    echo ' 
     <div class="col-lg-3 col-sm-6"> 
     <div class="thumbnail"> 
      <div class="thumb"> 
      <img src="' . $src . '" alt=""> 
      <div class="caption-overflow"> 
       <span> 
       <a href="' . $src . '" data-popup="lightbox" class="btn border-white text-white btn-flat btn-icon btn-rounded"><i class="icon-plus3"></i></a> 
       <a href="#" class="btn border-white text-white btn-flat btn-icon btn-rounded ml-5"><i class="icon-link2"></i></a> 
       </span> 
      </div> 
      </div> 
      <div class="caption"> 
      <h6 class="no-margin-top text-semibold"> 
       <a href="#" class="text-default">Not rapturous</a> 
       <a href="#" class="text-muted"><i class="icon-download pull-right"></i></a> 
      </h6> 
      ' . mb_substr($a['article_text'], 0, 120, 'utf-8') . '...<br>' . ' 
      </div> 
     </div> 
     </div>'; 
    } 
    ?> 
</div> 

的时候，我做了这些改变在我的桌面上。这对我来说可以。保持冷静。有耐心。然后，再试一次。它会工作。