如何在PHP中实现MySQL数据渲染的Bootstrap卡片水平对齐

问题原因 #

你的布局错误根源是把Bootstrap的容器、行、卡片组等全局布局标签写在了数据库循环内部，每遍历一条数据就会生成一整套独立的布局结构，自然每个卡片单独占一行垂直排列。同时你原有代码的标签层级也存在嵌套错误，多余的闭合标签会导致布局解析异常。

修正后代码 #

<?php 
require 'config.php';
$sql = "SELECT * FROM contents";
$query_run = mysqli_query($con, $sql);
$check_data = mysqli_num_rows($query_run) > 0;
?>
<!-- 外层布局移到循环外，全局只生成一次 -->
<div class="container py-5">
    <div class="row mt-4 g-4"> <!-- g-4是Bootstrap5的列间距，不需要可以去掉 -->
        <?php
        if($check_data) {
            while($row = mysqli_fetch_array($query_run)) {
        ?>
        <!-- 循环内只保留列和卡片代码 -->
        <div class="col-md-3">
            <div class="card h-100"> <!-- h-100保证同高度对齐 -->
                <img src="images/<?php echo $row['images'] ?>" class="card-img-top" alt="">
                <div class="card-body">
                    <h2 class="card-title"><?php echo $row['title']; ?></h2>
                    <h3 class="card-title"><?php echo $row['short_desc']; ?></h3>
                    <p class="card-text">
                        <?php echo $row['long_desc']; ?>
                    </p>
                </div>
            </div>
        </div>
        <?php
            }
        }
        ?>
    </div>
</div>

优化说明 #

• 给卡片添加h-100类，可保证同一行的卡片高度自动对齐，避免内容长度不同导致的错落问题
• 给行添加g-4类（Bootstrap5）可设置卡片之间的间距，Bootstrap4可用justify-content-around或者自定义margin调整
• 不需要额外的card-group标签，用Bootstrap原生的栅格系统row+col就能实现稳定的水平卡片布局

内容的提问来源于stack exchange，提问作者han