Bootstrap 4 проблемы с сеткой не совпадают так, как мне нужно

Question

Я пытаюсь составить список карточек, отображающих данные из моей базы данных. Я пытался переделывать свой код снова и снова, но не могу найти правильный путь. Также хочу отметить, что я новичок в Bootstrap и кодировании.

Мой текущий код:

<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";
        }
        ?>

Я хочу, чтобы это было так.

Я получаю следующее:

Answer 1

Вы создаете строку в каждой, в то время как итерация фиксирует контейнер и строку перед созданием карточек, чтобы они выровнялись в одну строку

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

Answer 2

Я согласен со всеми приведенными выше ответами. Проблема в том, что вы генерируете новую строку для каждого нового элемента в oop, поэтому вы получаете все в новой строке.

У меня есть другое решение. Если ваши элементы будут адаптироваться к количеству элементов базы данных, которое может быть большим, вы можете использовать flex в качестве лекарства. Использование столбцов - хороший способ. Flex - альтернативный подход, и Bootstrap 4 имеет fantasti c классы гибкости , например d-flex, flex-row, et c. и от flex-wrap до оберните ваши строки!

Прочтите об этом здесь: https://getbootstrap.com/docs/4.4/utilities/flex/

Answer 3

Проблема в том, что каждый раз, когда вы запускаете l oop, вы также включаете строку. Вам нужно переместить container и row из l oop:

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

Answer 4

Вот как вы можете использовать bootstrap столбцы и l oop только столбец, а не контейнер и строку ..

  

<?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-4">
    <div class="card" style="width: 18rem;">
            <div class="card-body">
                <h5 class="card-title"> <?php echo $row[ 'name' ]; ?></h5>
            </div>
    </div>
    <?php
          }
        }
        else
        {
          echo "TEST";
        }
        ?>