Bootstrap CSS d-flex 缩小表​​单输入

Posted 2023-03-17

【中文标题】Bootstrap CSS d-flex 缩小表​​单输入

【英文标题】：Bootstrap CSS d-flex shrinks form input

【发布时间】：2021-08-22 23:05:36

【问题描述】：

使用 bootstrap-5。我正在努力弄清楚为什么当我将 d-flex 类应用于容器时，我的表单输入和标签会缩小。从 div class=container 中，如果我删除 d-flex、justify-center 和 align-items-center，则表单不再位于页面中心。当我添加它时，我可以将内容居中，但是表单输入会缩小。谢谢

<div class="container d-flex justify-content-center align-items-center min-vh-100"></div>
    <form method="POST" action="#">
        <div class="row">
            <div class="col-6 mb-3">
                <label class="form-label" for="item">Enter Item</label>

                <input class="form-control" id="item" name="item" required type="text" value="">

            </div>
        </div>
        <div class="row">
            <div class="col-6 mb-3">
                <label class="form-label" for="category">Category</label>

                <input class="form-control" id="category" name="category" required type="text" value="">

            </div>
        </div>
        <div class="row">
            <div class="col-6 mb-3">
                <label class="form-label" for="price">Price</label>

                <input class="form-control" id="price" name="price" required type="text" value="">

            </div>
        </div>
        <div class="row">
            <div class="col-6 mb-3">
                <label class="form-label" for="location">Purchase Location</label>

                <input class="form-control" id="location" name="location" required type="text" value="">

            </div>
        </div>
        <div class="row">
            <div class="mb-3 justify-content-around">
                <input class="btn btn-outline-success" id="submit" name="submit" type="submit" value="Enter Data">
            </div>
        </div>
    </form>
</div>

没有弹性：

弹性

【参考方案1】：

将您的 html 更改为类似的内容，相应地更改 col-6 类以获得更大的宽度。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container d-flex justify-content-center align-items-center min-vh-100">
  <form method="POST" action="#" class="w-100">
    <div class="align-items-center flex-column row">
      <div class="col-6 mb-3">
        <label class="form-label" for="item">Enter Item</label>

        <input class="form-control" id="item" name="item" required type="text" value="">

      </div>
      <div class="col-6 mb-3">
        <label class="form-label" for="category">Category</label>

        <input class="form-control" id="category" name="category" required type="text" value="">

      </div>
      <div class="col-6 mb-3">
        <label class="form-label" for="price">Price</label>

        <input class="form-control" id="price" name="price" required type="text" value="">

      </div>
      <div class="col-6 mb-3">
        <label class="form-label" for="location">Purchase Location</label>

        <input class="form-control" id="location" name="location" required type="text" value="">

      </div>
      <div class="col-6 d-flex justify-content-center mb-3">
        <input class="btn btn-outline-success" id="submit" name="submit" type="submit" value="Enter Data">
      </div>
    </div>
  </form>
</div>