Bootstrap 网格显示不正确

Question

我一直在处理我的网页，但不知何故 bootstrap 无法正确显示它。下面是我的代码：

<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>
    <div class="row">
      <form method="post">
        <?php
            foreach($data as $row) {
        ?>
          <div class="col-md-4">
            <div class="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>
          </div>
      </form>
      <?php } ?>
    </div>
  </div>
</div>

我希望它是连续的 3 列，但我最终是这样的：

Click here to view the picture

我不确定我的代码有什么问题，如果有人能帮助我确定它会很棒。非常感谢

Answer 1

<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>
    <div class="row">
      
        <?php
            foreach($data as $row) {
        ?>
          <div class="col-4">
           <form method="post">
              <div class="card"> <div class="card-body">
                <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>
            </form>
          </div>
      
      <?php } ?>
    </div>
  </div>
</div>

解释：

更改位置：<form> 和 <form>

Bootstrap 网格显示不正确

Bootstrap grid does not show properly

html

php

bootstrap-4