為什么我的卡片在引導程式5中沒有正確對齊？-有解無憂

所以我一直在嘗試使用準備好的陳述句來使我的 PHP 更安全。

我需要顯示 db 表中的產品，并且不使用準備好的陳述句，卡片應該對齊。

然而，在準備好的宣告中，不知何故，我使卡片沒有在正確的網格中對齊。

 <!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/[email protected]/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>

uj5u.com熱心網友回復：

我看到了一些問題，我有一些建議。

你真的不需要為所有東西單獨的容器。我通常在一頁上只有一個，除非我需要它們的行為不同。
帶有表單的容器缺少一行。每一列都應該在一行內。
在行和每列之間有一個表格。表單應該是列內容的一部分，而不是與布局網格混合在一起。
您可能不想在卡片上設定固定寬度，因為每張卡片都在自己的一列中。如果你只是使用一組獨立流動的卡片，你可以做到這一點。

如果我們解決這些問題，事情似乎運作良好。這是您的代碼和我的更改。

<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/[email protected]/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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/381550.html

標籤：php html 推特引导

上一篇：在Node.JS中何時使用“import”以及何時使用“require”

下一篇：HTMLdiv跨越兩列兩行