引导网格无法正确显示

Posted 2023-03-05

【中文标题】引导网格无法正确显示

【英文标题】：Bootstrap grid does not show properly

【发布时间】：2021-12-23 17:52:13

【问题描述】：

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

<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" >
                <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

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

【问题讨论】：

For foreach($data as $row) --> 如果你需要 3 列，请检查 $data 这个 $data 应该是 3，在你的例子中我认为是 4

@Thomas_krk 哦，我认为如果我拥有 > 3 个 $data，它将自动开始新的一行？因为我想在每行 3 列中显示我拥有的所有数据？

这就是它的作用。在您的示例中，前 3 个 $data 有一行，下一个有一行。

【参考方案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" >
                <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 4，你使用：col-4 而不是 col-md-4" 不太正确，Bootstrap 4 也支持col-md-4

对不起，看完说明书：col-12col-md-4我错了