Бутстрап-карты укладываются вертикально

Во второй половине дня я сейчас работаю над личным проектом, используя фреймворк начальной загрузки и PHP. Главное, чего я пытаюсь достичь, — это когда я извлекаю данные из своей базы данных MySQL, чтобы они отображались в элементе начальной загрузки в виде горизонтальных рядов из 4 отдельных карт.

В нынешнем виде технические аспекты извлечения данных и их отображения работают. Но при переходе на страницу элементы карточки складываются. друг на друга по вертикали в один длинный список. В нынешнем виде я не слишком уверен, как это исправить, любая помощь будет оценена по достоинству. Как выглядит банкомат

Код главной страницы

<?php
include("inc/dbconfig.php");
include("inc/functions.php");
error_reporting(0);
$search = $_POST['search'];
$mysqlQ =("SELECT * FROM cards WHERE cardName LIKE '%$search%'");
$result = $conn -> query($mysqlQ);

if ($result -> num_rows > 0) {
    while ($row = $result -> fetch_assoc()) {
        itemCard($row);
    }
}
else {
    echo "<h1 class='search-h1'>No Results Found!</h1>";
    echo "<h4 class='search-h4'>It looks like no results could be found, please try again.</h4>";
}
$conn -> close();

Функция карты

<?php function itemCard (array $row) { ?>
<div class = "container">
    <div class = "row">
        <div class = "col-lg-3 col-md-4 col-sm6 col-xs-12">
            <div class = "card">
                <div class = "card-img">

                </div>
                <div class = "card-body">
                    <h5 class = "card-title text-center"><?= $row["cardName"] ?></h5>
                    <p class = "text-center">Card Set: <b><?= $row["cardSet"]  ?></b></p>
                    <p class = "text-center">Card Set: <b><?= $row["cardRarity"]  ?></b></p>
                </div>
            </div>
        </div>
    </div>
</div>
<?php } ?>

Примечание. В настоящее время на этом этапе не используется какой-либо пользовательский CSS. Я пытался использовать функциональность начальной загрузки по умолчанию для макета.

🤔 А знаете ли вы, что...
С PHP можно создавать динамические веб-сайты и веб-приложения.


392
2

Ответы:

Вы возвращаете контейнер и строку на каждой итерации. У вас должен быть один контейнер и строка, сгенерированная после 4 карт.


Решено

Вы должны распечатать свой контейнер и строку один раз, прежде чем печатать элементы.

Код главной страницы

<?php
include("inc/dbconfig.php");
include("inc/functions.php");
error_reporting(0);
$search = $_POST['search'];
$mysqlQ =("SELECT * FROM cards WHERE cardName LIKE '%$search%'");
$result = $conn -> query($mysqlQ);


if ($result -> num_rows > 0) {
    # container beginning tags
    echo '<div class = "container"><div class = "row">';

    # container content
    while ($row = $result -> fetch_assoc()) {
        itemCard($row);
    }

    # container ending tags
    echo '</div></div>';
}
else {
    echo "<h1 class='search-h1'>No Results Found!</h1>";
    echo "<h4 class='search-h4'>It looks like no results could be found, please try again.</h4>";
}
$conn -> close();

Функция карты

<?php function itemCard (array $row) { ?>
        <div class = "col-lg-3 col-md-4 col-sm6 col-xs-12">
            <div class = "card">
                <div class = "card-img">

                </div>
                <div class = "card-body">
                    <h5 class = "card-title text-center"><?= $row["cardName"] ?></h5>
                    <p class = "text-center">Card Set: <b><?= $row["cardSet"]  ?></b></p>
                    <p class = "text-center">Card Set: <b><?= $row["cardRarity"]  ?></b></p>
                </div>
            </div>
        </div>
<?php } ?>