我使用引导程序创建了以下卡片布局(如屏幕截图所示)。班级正在垂直添加我的.card-columns
卡片,因此我丢失了卡片的一部分。
我希望我的卡片水平对齐,每行正好 3 张卡片,而不改变卡片的大小。
这是我的标记和代码:
<body>
<div class="card-columns">
<?php
$conn=new mysqli("localhost","root","","dbname");
if(!$conn)
{
echo "connection_failed";
}
else{
}
$query= "select title,description,id from problems where difficulty='hard'";
$result=mysqli_query($conn,$query);
$num=mysqli_num_rows($result);
if(mysqli_query($conn,$query)){
}
else{
echo "Error: " . $query . "<br>" . mysqli_error($conn);
}
?>
<?php
while ($row=mysqli_fetch_array($result)) {
$title=$row[0];
$description=$row[1];
$index=$row[2];
?>
<div class="card-group">
<div class="card bg-info">
<div class="card-body">
<h5 class="card-title" style="color:white;">Card title</h5>
<p class="card-text" style="color: white;">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</body>
<?php }?>