如何修复引导 5 卡中的输入对齐？答案

【问题标题】：How to fix input alignment in bootstrap 5 card?如何修复引导 5 卡中的输入对齐？
【发布时间】：2022-01-03 01:01:30
【问题描述】：

当网站采用桌面和平板电脑分辨率时，文本输入可以很好地对齐，但是当我为移动设备调整大小时，我得到了这个输出。

   <form name="orderForm" method="post" action="updateList.php">
      <div class="card h-100">
         <div class="card-body p-4">
            <h5 class="card-title">Listing #<?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"><input name="title" placeholder="Title" value="<?php echo $row['title'];?>"></li>
               <li class="list-group-item"><input name="artist" placeholder="Artist" value="<?php echo $row['artist'];?>"></li>
               <li class="list-group-item"><input name="genre" placeholder="Genre" value="<?php echo $row['genre'];?>"></li>
               <li class="list-group-item"><input type="number" name="price" placeholder="Price" value="<?php echo $row['price'];?>"></li>
               <li class="list-group-item"><input type="number" name="qtyInStock" placeholder="Quantity" value="<?php echo $row['qtyInStock'];?>"></li>
            </ul>
            <p align="center"><button type="submit" class="btn btn-primary">UPDATE</button>
            </p>
         </div>
      </div>
   </form>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

如果希望输入区域的宽度与屏幕匹配，使其与屏幕一样宽，可以为所有<input>div 添加claas col-12。

<!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>Hello, world!</title>
</head>

<body>
  <form name="orderForm" method="post" action="updateList.php">
    <div class="card h-100">
      <div class="card-body p-4">
        <h5 class="card-title">Listing #<?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"><input class="col-12" name="title" placeholder="Title" value="<?php echo $row['title']; ?>"></li>
          <li class="list-group-item"><input class="col-12" name="artist" placeholder="Artist" value="<?php echo $row['artist']; ?>"></li>
          <li class="list-group-item"><input class="col-12" name="genre" placeholder="Genre" value="<?php echo $row['genre']; ?>"></li>
          <li class="list-group-item"><input class="col-12" type="number" name="price" placeholder="Price" value="<?php echo $row['price']; ?>"></li>
          <li class="list-group-item"><input class="col-12" type="number" name="qtyInStock" placeholder="Quantity" value="<?php echo $row['qtyInStock']; ?>"></li>
        </ul>
        <p align="center"><button type="submit" class="btn btn-primary">UPDATE</button>
        </p>
      </div>
    </div>
  </form>

</body>

</html>

【讨论】：

【解决方案2】：

您可以删除 ui 和 li 标签。并在输入标签中使用“form-control”类以获得全宽。

【讨论】：