无法实现图片按行渲染：Bootstrap行列与Table方案均失效求助

原代码核心问题 #

• 循环内部重复输出.container、<table>、<tr>标签，每一张卡片都被包裹在独立的容器和表格行中，无法实现同行展示。
• HTML结构错误：<tr>在循环内开启却在循环外闭合，浏览器自动修正后会破坏预期布局。
• 用table布局Bootstrap卡片不符合框架设计逻辑，table更适用于数据展示，而非组件布局。

修正方案（使用Bootstrap栅格系统） #

推荐用Bootstrap的row+col栅格系统实现响应式卡片同行展示，这是框架原生布局方式，比table更灵活且符合规范：

// Get images from the database
$query = $db->query("SELECT * FROM images ORDER BY id DESC LIMIT 5");

if($query->num_rows > 0){
?>
<div class="container recent-posts">
  <div class="row g-3"> <!-- g-3 控制卡片间距 -->
    <?php while($row = $query->fetch_assoc()){
        $imageURL = 'uploads/'.$row["file_name"];
    ?>
    <div class="col-md-4"> <!-- md屏幕下每行3张，可按需调整col-md-*数值 -->
      <div class="card" style="width: 100%;">
        <img src="<?php echo $imageURL; ?>" alt="" class="card-img-top" />
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <?php } ?>
  </div>
</div>
<?php }
else{ ?>
    <p>No image(s) found...</p>
<?php } ?>

修正说明 #

1. 将.container和.row放在循环外部，确保所有卡片处于同一个行容器内。
2. 用col-md-4实现响应式布局：中等及以上屏幕每行显示3张卡片，小屏幕自动堆叠。
3. 卡片宽度设为100%，适配列容器宽度，避免固定宽度导致布局错位。
4. 给图片添加card-img-top类，符合Bootstrap卡片组件的样式规范。

若坚持用table布局（不推荐） #

如果一定要用table，需修正结构错误，将<table>、<tr>放在循环外，循环内仅输出<td>：

// Get images from the database
$query = $db->query("SELECT * FROM images ORDER BY id DESC LIMIT 5");

if($query->num_rows > 0){
?>
<div class="container recent-posts">
  <table>
    <tr>
      <?php while($row = $query->fetch_assoc()){
          $imageURL = 'uploads/'.$row["file_name"];
      ?>
      <td>
        <div class="card" style="width: 18rem;">
          <img src="<?php echo $imageURL; ?>" alt="" />
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </td>
      <?php } ?>
    </tr>
  </table>
</div>
<?php }
else{ ?>
    <p>No image(s) found...</p>
<?php } ?>

但table布局无法实现响应式自动换行，小屏幕会出现横向滚动条，因此优先推荐栅格系统方案。

内容的提问来源于stack exchange，提问作者jonathan22345