如何使用PHP while循环动态创建布局正确的Bootstrap 4 Cards

数据老陈

2026-10-16

问题根源

布局错乱核心原因是container、row标签被放在了while循环内部，每次遍历植物数据都会生成独立的容器和行，每个行里只有1张卡片，自然全部垂直排列。

修复方案

直接替换原有卡片渲染区域的代码即可，修改后代码如下：

<!-- 卡片区域开始 -->
<div class="container">
  <div class="row">
  <?php
  include("connection.php");
  $sql = "SELECT name FROM addplant";
  $query = mysqli_query($conn, $sql);
  while($rows = mysqli_fetch_assoc($query)) { ?>
    <!-- 中等及以上屏幕每列占4份栅格，一行刚好放3张，小屏幕自动堆叠 -->
    <div class="col-md-4 mb-4">
      <div class="card border-secondary shadow h-100">
        <div class="card-body">
          <div class="text-center">
            <img style="width:230px; height:180px" class="card-img-top" src="img/2.jpeg" alt="植物图片">
          </div>
          <br>
          <p class="card-text text-left"><b>名称 : </b><br><?php echo $rows['name']; ?></p>
          <p class="card-text text-left"><b>学名 : </b><br>Juglans</p>
          <div class="text-center mt-3">
            <a href="booking.php" class="btn btn-secondary">预约</a>
          </div>
        </div>
      </div>
    </div>
  <?php  } ?>
  </div>
</div>
<!-- 卡片区域结束 -->

调整说明

容器和行标签移到循环外部，所有卡片的列都放在同一行内，Bootstrap栅格系统会自动把超过12份宽度的元素换到下一行
列类改用col-md-4：中等及以上屏幕宽度下，每列占4份栅格，一行刚好放3张，小屏幕下自动堆叠为单列，适配移动端
新增h-100类让同行卡片高度统一，mb-4类设置卡片底部间距，替换已废弃的<center>标签为Bootstrap原生的text-center类
移除了卡片上写死的固定宽高，避免和栅格系统冲突