如何让MySQL查询生成的card卡片在同一行水平对齐排列？

你当前使用Bootstrap栅格布局实现卡片排列，之所以垂直展示是因为while循环中每个卡片外层都套了col-sm-12类，该类会让容器占满100%行宽，导致每张卡片都单独占一行。

修改后的代码 #

<?php
$output = "";
// 先在循环外开启行容器，所有卡片列放在同一个row内
$output .= "<div class='container'><div class='row'>";
while($row = mysqli_fetch_array($result))  
{  
    $id = $row['courseID'];
    $name = $row['courseName'];
    $category = $row['category'];
    $description = $row['description'];
    // 去掉多余的col-sm-12包裹，直接输出卡片列
    $output.=
    "
        <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;
?>

修改说明 #

• 调整了栅格结构，遵循Bootstrap container → row → col的嵌套规则，所有卡片的col-md-4都放在同一个row容器内，会自动水平排列
• col-md-4的作用是在屏幕宽度≥768px时，每个列占1/3行宽，刚好每行放3张卡片，超出的卡片会自动换行
• 如果需要适配更小的屏幕，可以修改列类，比如改成col-12 col-sm-6 col-md-4，实现超小屏每行1张、小屏每行2张、中大屏每行3张的响应式效果

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