PHP SQL动态读取商品数据，Bootstrap网格布局商品换行问题排查

你的问题很典型——循环内部重复生成了完整的容器和行结构，导致每个商品都被包裹在独立的.row和占满宽度的.col-lg-12里，自然每个商品都会独占一行。咱们来一步步修正：

问题分析 #

你当前的代码在while循环里，每遍历一个商品就输出一次.container、.row和.col-lg-12。这相当于给每个商品都单独创建了一个行，而且.col-lg-12会占据整行的12个栅格，所以每个商品必然单独成行。

修正方案 #

把容器和行结构移到循环外面，只在循环内部输出商品卡片所在的列，同时根据你想要的每行商品数量调整列的栅格类：

• 如果想每行显示3个商品：用.col-lg-4（12 ÷ 3 = 4）
• 如果想每行显示4个商品：用.col-lg-3（12 ÷ 4 = 3）
• 去掉卡片固定宽度style="width: 18rem;"，让卡片随列宽自适应，或者用Bootstrap宽度类控制

修正后的完整代码 #

<?php
include ("connection.php"); 
$sql = "select * from products"; 
$result = mysqli_query($con,$sql); 
?>
<!-- 容器和行只需要一次，放在循环外面 -->
<div class="container my-4"> 
  <div class="row g-4"> <!-- g-4 是列间距类，优化布局美观度 -->
    <?php while ($row = $result->fetch_assoc()) { ?>
    <!-- 每行3个商品，小屏幕自动调整为每行2个 -->
    <div class="col-lg-4 col-md-6"> 
      <div class="card h-100"> <!-- h-100 让同一行卡片高度一致 -->
        <!-- img-fluid 确保图片响应式缩放 -->
        <img src="<?php echo $row['Pimage'] ?>" class="card-img-top img-fluid" alt="<?php echo $row['Pname'] ?>"> 
        <div class="card-body"> 
          <h5 class="card-title"><?php echo $row['Pname'] ?></h5> 
          <p class="card-text"><?php echo $row['Pdesc'] ?></p> 
          <p class="fw-bold"><?php echo $row['Pprice'] ?> PKR</p> 
          <a href="#" class="btn btn-warning">ADD To Cart</a> 
        </div> 
      </div> 
    </div> 
    <?php } ?>
  </div> 
</div>

额外优化建议 #

• g-4类给行内的列增加间距，避免卡片挤在一起
• h-100类让同一行的卡片高度统一，解决内容多少导致的布局参差不齐问题
• img-fluid确保图片在不同屏幕尺寸下自适应容器宽度
• fw-bold给价格加粗，增强页面视觉层次

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