为啥我的卡在 bootstrap 5 中没有正确对齐？
Posted
技术标签:
【中文标题】为啥我的卡在 bootstrap 5 中没有正确对齐？【英文标题】：Why aren't my cards aligning properly in bootstrap 5?为什么我的卡在 bootstrap 5 中没有正确对齐？ 【发布时间】：2022-01-18 03:22:12 【问题描述】：所以我一直在尝试使用准备好的语句以使我的 php 更安全。
我需要显示数据库表中的产品，并且不使用准备好的语句，卡片应按应有的方式对齐。
但是，通过一个准备好的声明，不知何故，我让卡片没有在正确的网格中对齐。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Website Title</title>
<?php
include 'navbar.php';
include 'dbConnect.php';
$results=$db->query("SELECT * FROM Stock");
?>
</head>
<body>
<div class="container-xl">
<div class="row">
<div class="col">
<p class="text-muted"> Home > viewStock.php </p>
<h1 class="display-6">Shop
</h1>
</div>
</div>
</div>
<div class="container-xl">
<?php while($row=$results->fetch_array())
?>
<form name="orderForm" method="post" action="viewProduct.php">
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Stock No: <?php echo $row['stockID'] ?></h5>
<input type="hidden" name="stockID" value="<?php echo $row['stockID'] ?>">
<span class="card"><img class="img-fluid card-img-top" src="<?php echo $row['image'] ?>" ></span>
<ul class="list-group list-group-flush">
<li class="list-group-item">Description: <?php echo $row['category'] ?></li>
<li class="list-group-item">Quantity In Stock: <?php echo $row['qtyInStock'] ?></li>
<li class="list-group-item">Price: £<?php echo $row['price'] ?></li>
</ul>
<p align="center"><button type="submit" class="btn btn-primary">VIEW</button></p>
</div>
</div>
</div>
</form>
<?php ?>
</div>
<!-- end row -->
</body>
<!-- Footer-->
<footer class="container-xl py-5 bg-light">
<div class="container">
<p class="m-0 text-center text-black">Copyright © The Music Store 2021</p>
</div>
</footer>
</html>
【问题讨论】：
嗨詹姆斯。如果您有兴趣成为一名专业的 PHP 开发人员，我会建议您学习现代 PHP 吗？您处理此问题的方式已经过时，取而代之的是利用 API、javascript 和其他技术的新技术。现代架构将视图与数据分离。对你学习新技术有好处，但你走错了路。我建议你找到一个像 Drupal 这样的平台并了解它，然后你就可以开始你的职业生涯了。 【参考方案1】：我看到了一些问题，我有一些建议。
您并不需要单独的容器来存放所有东西。除非我需要它们以不同的方式表现，否则我通常只有一个页面。 带有表单的容器缺少一行。每一列都应该在一行内。 在行和每列之间有一个表格。表单应该是列内容的一部分，而不是与布局网格混合。 您可能不想在卡片上设置固定宽度，因为每个卡片都有自己的一列。如果您只是使用一组独立流动的卡片，您可以这样做。如果我们解决了这些问题，事情似乎会运作良好。这是您的代码以及我所做的更改。
<div class="container-xl">
<div class="row">
<?php while($row=$results->fetch_array()) ?>
<div class="col-sm-4">
<form name="orderForm" method="post" action="viewProduct.php">
<div class="card">
<div class="card-body">
<h5 class="card-title">Stock No:
<?php echo $row['stockID'] ?>
</h5>
<input type="hidden" name="stockID" value="<?php echo $row['stockID'] ?>">
<span class="card">
<img class="img-fluid card-img-top" src="<?php echo $row['image'] ?>" >
</span>
<ul class="list-group list-group-flush">
<li class="list-group-item">Description:
<?php echo $row['category'] ?>
</li>
<li class="list-group-item">Quantity In Stock:
<?php echo $row['qtyInStock'] ?>
</li>
<li class="list-group-item">Price: £
<?php echo $row['price'] ?>
</li>
</ul>
<p align="center"><button type="submit" class="btn btn-primary">VIEW</button></p>
</div>
</div>
</form>
</div>
<?php ?>
</div>
</div>
这是输出的模型。我已经在您的 HTML 中重复了这些列以进行演示。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container-xl">
<div class="row">
<div class="col-sm-4">
<form name="orderForm" method="post" action="viewProduct.php">
<div class="card">
<div class="card-body">
<h5 class="card-title">Stock No:
<?php echo $row['stockID'] ?>
</h5>
<input type="hidden" name="stockID" value="<?php echo $row['stockID'] ?>">
<span class="card"><img class="img-fluid card-img-top" src="<?php echo $row['image'] ?>" ></span>
<ul class="list-group list-group-flush">
<li class="list-group-item">Description:
<?php echo $row['category'] ?>
</li>
<li class="list-group-item">Quantity In Stock:
<?php echo $row['qtyInStock'] ?>
</li>
<li class="list-group-item">Price: £
<?php echo $row['price'] ?>
</li>
</ul>
<p align="center"><button type="submit" class="btn btn-primary">VIEW</button></p>
</div>
</div>
</form>
</div>
<div class="col-sm-4">
<form name="orderForm" method="post" action="viewProduct.php">
<div class="card">
<div class="card-body">
<h5 class="card-title">Stock No:
<?php echo $row['stockID'] ?>
</h5>
<input type="hidden" name="stockID" value="<?php echo $row['stockID'] ?>">
<span class="card"><img class="img-fluid card-img-top" src="<?php echo $row['image'] ?>" ></span>
<ul class="list-group list-group-flush">
<li class="list-group-item">Description:
<?php echo $row['category'] ?>
</li>
<li class="list-group-item">Quantity In Stock:
<?php echo $row['qtyInStock'] ?>
</li>
<li class="list-group-item">Price: £
<?php echo $row['price'] ?>
</li>
</ul>
<p align="center"><button type="submit" class="btn btn-primary">VIEW</button></p>
</div>
</div>
</form>
</div>
<div class="col-sm-4">
<form name="orderForm" method="post" action="viewProduct.php">
<div class="card">
<div class="card-body">
<h5 class="card-title">Stock No:
<?php echo $row['stockID'] ?>
</h5>
<input type="hidden" name="stockID" value="<?php echo $row['stockID'] ?>">
<span class="card"><img class="img-fluid card-img-top" src="<?php echo $row['image'] ?>" ></span>
<ul class="list-group list-group-flush">
<li class="list-group-item">Description:
<?php echo $row['category'] ?>
</li>
<li class="list-group-item">Quantity In Stock:
<?php echo $row['qtyInStock'] ?>
</li>
<li class="list-group-item">Price: £
<?php echo $row['price'] ?>
</li>
</ul>
<p align="center"><button type="submit" class="btn btn-primary">VIEW</button></p>
</div>
</div>
</form>
</div>
</div>
</div>【讨论】：
我已经用你修改的原始代码更新了答案。以上是关于为啥我的卡在 bootstrap 5 中没有正确对齐？的主要内容，如果未能解决你的问题，请参考以下文章
ASP.NET-MVC5 - 为啥 Bootstrap v4 主题不能正确显示组件？
AD20中原理图没有错 封装裤没有错 但是芯片为啥导入不了PCB里面呢？