将MySQL数据读入Bootstrap 4列中

问题描述 投票：0回答：1

欢迎论坛居民，

我的目标是在输入卡中显示MySQL数据，在引导4行中并排对齐的卡。

读取MySQL数据效果很好，但是Bootstrap 4网格系统未将输入卡并置。 （如果我不从MySQL读取数据，则仅使用纯HTML，Grid系统可以正常工作。）

代码：

...
        <?php include_once('includes/head.tpl'); ?>
    </head>
    <body>
        <?php include_once('includes/php/navbar.php'); ?>
            <form method="GET" action="action2.php">
        <?php
            $result = mysqli_query($conn, "SELECT * FROM plans");
            while($row = mysqli_fetch_array($result)) {
        ?>
                <div class="container">
                    <div class="row">
                        <div class="col-sm-4">
                            <label>
                                <input type="radio" name="plan_id" id="plan_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>
                    </div>
         <?php   
            }  
        ?>
        <input type="submit" name="btn-submit">
            </form>  
         </div>

...

最终结果：

enter image description here

可能是什么问题？为什么在阅读MySQL时网格系统无法正常工作？

提前感谢您的回答！

php mysql grid
1个回答
0
投票

问题看起来就像您为数据的每一行创建了引导容器div和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" 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>
            </div>

如果您有更多适合行的计划，则每次到达拆分点时，都需要为该行创建div。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.