Html Bootstrap 4网格问题与我需要的方式不一致

我正在尝试制作一个显示数据库数据的卡片列表。我已经尝试了一遍又一遍地重做我的代码，但是我找不到正确的方法。请允许我也注意，我对引导和编码是新手

我当前的代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


                <?php
            require 'connect.php';
            $query = "SELECT * FROM communities";
            $query_run = mysqli_query($connection, $query);
            $check_communities = mysqli_num_rows($query_run) > 0;

            if($check_communities)
            {
              while($row = mysqli_fetch_assoc($query_run))
              {
                ?>
<div class="container mt-4">
    <div class="row">
        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title"> <?php echo $row['name']; ?></h5>
                </div>
            </div>
        </div>
      </div>
            <?php
          }
        }
        else
        {
          echo "TEST";
        }
        ?>

我想要的方式是这样的

我明白了：

---

这就是如何使用引导列并仅循环列而不是容器和行

---

您正在每个while迭代中创建一行 在生成卡片之前固定容器和行，以便它们在一行中对齐

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container mt-4">
    <div class="row">

                <?php
            require 'connect.php';
            $query = "SELECT * FROM communities";
            $query_run = mysqli_query($connection, $query);
            $check_communities = mysqli_num_rows($query_run) > 0;

            if($check_communities)
            {
              while($row = mysqli_fetch_assoc($query_run))
              {
                ?>

        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title"> <?php echo $row['name']; ?></h5>
                </div>
            </div>
        </div>
            <?php
          }
        }
        else
        {
          echo "TEST";
        }
        ?>
      </div>
</div>

---

问题是，每次运行循环时，都会包括行。您需要将容器和行移出循环：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>


<?php
require 'connect.php';
$query             = "SELECT * FROM communities";
$query_run         = mysqli_query( $connection, $query );
$check_communities = mysqli_num_rows( $query_run ) > 0;
?>
<div class="container mt-4">
    <div class="row">
        <?php
        if ( $check_communities )
        {
        while ( $row = mysqli_fetch_assoc( $query_run ) )
        {
        ?>

        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title"> <?php echo $row[ 'name' ]; ?></h5>
                </div><!-- /card-body -->
            </div><!-- /card -->
        </div><!-- /col-auto -->

            <?php
            }
            }
            else {
                echo "TEST";
            }
            ?>

        </div><!-- /row -->
    </div><!-- /container -->

---

我同意上面给出的所有答案。问题是，您正在为循环中的每个新项生成一个新行，因此您正在将所有内容都放在一个新行中

我有一个完全不同的解决方案。如果您的元素要适应数据库元素的数量（可能很多），您可以使用flex作为解决方法。 使用列是一种好方法。Flex是另一种方法，Bootstrap4有很棒的Flex类，如d-Flex、FlexRow等，Flex wrap也可以包装您的行

---

请在此处阅读：

请发布呈现的HTML，而不是PHP。是否可以共享标签？我想你忘了一些元tags@j08691这是我唯一的代码。@Giuppox这是我唯一的代码。最明显的问题是你打开了5个div，只关闭了4个div。这就是为什么这两张牌不仅在彼此下面，而且在每一行都有缩进。你解决了我的问题。我不得不关闭我的最后一个部门。谢谢。太好了！我对它进行了一些清理，以包括结束div注释，以确保所有标记都被考虑在内。默认情况下，BS4中的行是一个flex元素。OP已经在使用flex for Oh。我没有意识到这一点。谢谢你让我知道！因为我们有相同的答案，并且在几秒钟内就这样做了。