我试图在每张卡片中显示MySQL查询，但如何内联打印卡片？它现在是在另一个下面打印，但我希望它们水平地在同一行上。

<?php
            $output="";

            while($row = mysqli_fetch_array($result))  
            {  
                $id = $row['courseID'];
                $name = $row['courseName'];
                $category = $row['category'];
                $description = $row['description'];

                $output.=
                "
                    <div class='col-sm-12'>
                        <div class='col-md-4 mb-5'>
                            <div class='card h-100'>
                                <div class='card-body'>
                                    <h4 class='card-title'>$name</h4>
                                    <p class='card-text'>$id</p>
                                    <p class='card-text'>$description</p>
                                </div>
                            <div class='card-footer'><a href='#' class='btn btn-primary'>Assign</a></div>
                        </div>
                    </div>";    
            }
            $output .= "</div></div>"; 
            echo $output;
            ?>  

---

顺晟科技：

复制（从这里）和（到这里）之间的代码

下面是我刚才使用的一个for循环示例:

用容器作为类创建一个父div，用行作为类向父div添加一个div，然后在该行中添加卡片，将其分类为div。

ex:

<?php
            $output="";

            while($row = mysqli_fetch_array($result))  
            {  
                $id = $row['courseID'];
                $name = $row['courseName'];
                $category = $row['category'];
                $description = $row['description'];

                $output.=
                "
                    <div class='col-sm-12'>
                        <div class='col-md-4 mb-5'>
                            <div class='card h-100'>
                                <div class='card-body'>
                                    <h4 class='card-title'>$name</h4>
                                    <p class='card-text'>$id</p>
                                    <p class='card-text'>$description</p>
                                </div>
                            <div class='card-footer'><a href='#' class='btn btn-primary'>Assign</a></div>
                        </div>
                    </div>";    
            }
            $output .= "</div></div>"; 
            echo $output;
            ?>  

只需将您的时间移到以下位置:

<?php
            $output="";

            while($row = mysqli_fetch_array($result))  
            {  
                $id = $row['courseID'];
                $name = $row['courseName'];
                $category = $row['category'];
                $description = $row['description'];

                $output.=
                "
                    <div class='col-sm-12'>
                        <div class='col-md-4 mb-5'>
                            <div class='card h-100'>
                                <div class='card-body'>
                                    <h4 class='card-title'>$name</h4>
                                    <p class='card-text'>$id</p>
                                    <p class='card-text'>$description</p>
                                </div>
                            <div class='card-footer'><a href='#' class='btn btn-primary'>Assign</a></div>
                        </div>
                    </div>";    
            }
            $output .= "</div></div>"; 
            echo $output;
            ?>  

使用此代码段。使用grid-gap可以更好地使用Grid。

您可以在while循环之前创建一个新的div，并加入

如下所示，您将创建一个名为cards的新div

<?php
            $output="";

            while($row = mysqli_fetch_array($result))  
            {  
                $id = $row['courseID'];
                $name = $row['courseName'];
                $category = $row['category'];
                $description = $row['description'];

                $output.=
                "
                    <div class='col-sm-12'>
                        <div class='col-md-4 mb-5'>
                            <div class='card h-100'>
                                <div class='card-body'>
                                    <h4 class='card-title'>$name</h4>
                                    <p class='card-text'>$id</p>
                                    <p class='card-text'>$description</p>
                                </div>
                            <div class='card-footer'><a href='#' class='btn btn-primary'>Assign</a></div>
                        </div>
                    </div>";    
            }
            $output .= "</div></div>"; 
            echo $output;
            ?>  

我希望通过使用此代码，卡片将在同一行中对齐。