Bootstrap 4网格读取MySQL数据后卡片无法并排的问题排查

嗨，我来帮你排查这个Bootstrap网格失效的问题！你遇到的核心问题在于循环内部重复生成了.container和.row元素，这直接破坏了Bootstrap网格系统的层级结构。

为什么会失效？ #

Bootstrap的网格布局规则是：.container（或.container-fluid）包裹.row，然后.row里面放置多个.col-*列元素。而你的代码在while循环里，每读取一条MySQL数据就会创建一个新的.container和.row，这就导致每个卡片都被单独放在一行里，自然没法实现并排效果。

修复后的代码示例 #

你只需要把.container和.row移到循环外面，让所有的.col-sm-4都处于同一个.row下即可：

<?php include_once('includes/head.tpl'); ?>
</head>
<body>
<?php include_once('includes/php/navbar.php'); ?>
<form method="GET" action="action2.php">
    <!-- 把container和row放到循环外面，只创建一次 -->
    <div class="container">
        <div class="row">
            <?php 
            $result = mysqli_query($conn, "SELECT * FROM plans"); 
            while($row = mysqli_fetch_array($result)) { 
            ?>
                <div class="col-sm-4">
                    <label>
                        <input type="radio" name="plan_id" id="plan_id_<?php echo $row['id']; ?>" value="<?php echo $row['id']; ?>" class="card-input-element" />
                        <div class="card-input">
                            <?php echo $row['plan_name']; ?><br>
                            <?php echo $row['plan_cpu']; ?><br>
                            <?php echo $row['plan_memory']; ?><br>
                            <?php echo $row['plan_disk']; ?><br>
                        </div>
                    </label>
                </div>
            <?php } ?>
        </div>
        <input type="submit" name="btn-submit">
    </div>
</form>
</body>

额外小提示 #

• 我修改了input的id属性：原来循环里重复使用id="plan_id"不符合HTML规范（id必须唯一），改成id="plan_id_<?php echo $row['id']; ?>"可以保证每个元素id唯一。
• 如果想让卡片样式更贴合Bootstrap风格，可以给.card-input添加.card、.card-body这类内置样式类，提升视觉效果。

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