Bootstrap grid布局显示异常，无法实现每行3列效果该如何解决？

核心问题排查 #

• 栅格规则不符合：Bootstrap栅格系统要求.row的直接子元素只能是.col-*系列类元素，你的代码中.row的直接子元素是<form>标签，导致col宽度计算逻辑失效，无法正常按1/3宽度分配。
• 标签闭合顺序错误：PHP的foreach循环写在<form>标签内部，但</form>闭合标签放在了循环结束语句<?php } ?>之前，导致仅第一个卡片被包含在form内部，其余卡片均在form外，DOM结构完全混乱，布局错位。
• 卡片结构嵌套错误：.card-body是.card的内置子元素，你在.col-md-4和.card之间多嵌套了一层无效的.card-body，额外增加的内边距会挤压卡片宽度，打乱3列布局的宽度占比。

修复后代码 #

<div class="main-panel">
  <div class="content-wrapper">
    <button type="button" class="btn btn-primary btn-rounded btn-icon" data-toggle="modal" data-target="#newGroupModal">
           <i class="ti-plus"></i>
          </button>
    <!-- 调整form嵌套位置，包裹整个row -->
    <form method="post">
      <div class="row">
        <?php
            foreach($data as $row) {
        ?>
          <div class="col-md-4">
            <!-- 删除多余的外层card-body -->
            <div class="card">
              <img class="card-img-top" src="../../template/images/banner.png" alt="Card image cap">
              <div class="card-body">
                <h5 class="card-title">
                  <?=$row['group_name']?>
                </h5>
                <p class="card-text"></p>
                <a class="btn btn-primary" href="view_group.php?group_id=<?=$row['group_id']?>">View Group</a>
              </div>
            </div>
          </div>
        <?php } ?>
      </div>
    </form>
  </div>
</div>

修复说明 #

1. 调整<form>与.row的嵌套顺序，将.row放在<form>内部，保证.row的直接子元素只有.col-md-4，符合Bootstrap栅格规范，col可以正常计算1/3宽度。
2. 修正标签闭合顺序，将</form>移到循环结束语句之后，保证所有卡片都在同一form内，DOM结构正常。
3. 删除无效的外层.card-body层，恢复卡片正常宽度计算，不会额外挤压布局空间。

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