为什么我的卡片在 bootstrap 5 中没有正确对齐？

Question

所以我一直在尝试使用准备好的语句来使我的 PHP 更安全。

我需要显示数据库中的产品 table 并且不使用准备好的语句，卡片按应有的方式对齐。

但是，在准备好的陈述中，我不知何故在某处使卡片未在正确的网格中对齐。

 <!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'] ?>" alt="No image yet"></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 &copy; The Music Store 2021</p>
      </div>
   </footer>
</html>

Answer 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'] ?>" alt="No image yet">
            </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'] ?>" alt="No image yet"></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'] ?>" alt="No image yet"></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'] ?>" alt="No image yet"></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 中没有正确对齐？

Why aren't my cards aligning properly in bootstrap 5?

html

php

twitter-bootstrap