垂直堆叠的引导卡答案

【问题标题】：Bootstrap cards stacking vertically垂直堆叠的引导卡
【发布时间】：2021-03-31 14:02:34
【问题描述】：

下午，我目前正在使用引导框架和 PHP 进行个人项目。我想要实现的基本目标是，当我从 MySQL 数据库中提取数据以将其显示在引导卡元素中，以 4 个单独的卡片的水平行显示。

就目前而言，提取数据和显示数据的技术方面是可行的。但是当进入页面时，卡片元素是堆叠的。在一个长长的列表中垂直排列。就目前而言，我不太确定如何解决这个问题，任何帮助将不胜感激。 What it looks like atm

主页代码

<?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 echo
警告：您对SQL Injections 持开放态度，应该使用参数化的prepared statements，而不是手动构建查询。它们由PDO 或MySQLi 提供。永远不要相信任何形式的输入！即使您的查询仅由受信任的用户执行，you are still in risk of corrupting your data。 Escaping is not enough!
@RaahimFareed 这不是真的。该语法始终处于启用状态，它是echo 的推荐短语法

标签： php css bootstrap-4

【解决方案1】：

您将在每次迭代中返回一个容器和一行。您应该有一个容器和 4 张卡片后生成的一行。

【讨论】：

【解决方案2】：

您应该在打印项目之前打印一次容器和行。

主页代码

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

【讨论】：