javascript Bootstrap 5输入组无法在移动的上垂直调整-如何修复？

使用boostrap5.2.3.我有一个输入组，它显示一组跨度为“.input-group-text”，输入为“.form-control”。它的工作原理，因为我需要在电脑屏幕上，但不调整垂直移动的上。
我现在的代码如下（尽量不使用row/col-sm）：

<div class="container">
    <hr>
    <h5>1st step: Type the valuations criteria:</h5>
    <div class="input-group input-group-lg input-group-sm mb-3">
        <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="bottom"
            title="The search will include properties sold within the radius">Radius:</span>
        <input type="number" class="form-control" id="radiusMetersId" value=300 min="100"
            max="10000" step="100" data-bs-toggle="tooltip" data-bs-placement="bottom" title="(meters)">

        <span class="input-group-text">Sale type:</span>
        <select class="form-control" id="saleTypeId">
            <option value="apartment">Apartment</option>
            <option value="house">House</option>
            <option value="all">All</option>
        </select>

        <span class="input-group-text">Sqm:</span>
        <input class="form-control" type="number" value="50" min="5" max="100000" step="5" id="sqmId">

        <span class="input-group-text">Rooms:</span>
        <input class="form-control" type="number" value="3" min="0" max="10" step="1" id="roomsId">
    </div>
</div>

我使用这些标题：

<!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

这些脚本：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

参见以下图片：（最后一张照片是我想在移动的）：

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <hr>
    <h5>1st step: Type the valuations criteria:</h5>
    <div class="input-group input-group-lg input-group-sm mb-3">
      <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="bottom" title="The search will include properties sold within the radius">Radius:</span>
      <input type="number" class="form-control" id="radiusMetersId" value=300 min="100" max="10000" step="100" data-bs-toggle="tooltip" data-bs-placement="bottom" title="(meters)">

      <span class="input-group-text">Sale type:</span>
      <select class="form-control" id="saleTypeId">
        <option value="apartment">Apartment</option>
        <option value="house">House</option>
        <option value="all">All</option>
      </select>

      <span class="input-group-text">Sqm:</span>
      <input class="form-control" type="number" value="50" min="5" max="100000" step="5" id="sqmId">

      <span class="input-group-text">Rooms:</span>
      <input class="form-control" type="number" value="3" min="0" max="10" step="1" id="roomsId">
    </div>
  </div>
<script src = "https://code.jquery.com/jquery-3.6.0.min.js" ></script>
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" ></script>
</body>

使用媒体查询我们可以实现它

@media (max-width: 767px) {
  .input-group-sm .input-group-text,
  .input-group-sm .form-control {
    display: block;
    width: 100%;
    text-align: left;
    border-radius: 0.25rem!important;
  }
  .input-group-sm .input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

@media (max-width: 767px) {
  .input-group-sm .input-group-text,
  .input-group-sm .form-control {
    display: block;
    width: 100%;
    text-align: left;
    border-radius: 0.25rem!important;
  }
  .input-group-sm .input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
  <hr>
  <h5>1st step: Type the valuation criteria:</h5>
  <div class="input-group input-group-lg input-group-sm mb-3">
    <span class="input-group-text custom-label" data-bs-toggle="tooltip" data-bs-placement="bottom" title="The search will include properties sold within the radius">Radius:</span>
    <input type="number" class="form-control" id="radiusMetersId" value="300" min="100" max="10000" step="100" data-bs-toggle="tooltip" data-bs-placement="bottom" title="(meters)">

    <span class="input-group-text custom-label">Sale type:</span>
    <select class="form-control" id="saleTypeId">
      <option value="apartment">Apartment</option>
      <option value="house">House</option>
      <option value="all">All</option>
    </select>

    <span class="input-group-text custom-label">Sqm:</span>
    <input class="form-control" type="number" value="50" min="5" max="100000" step="5" id="sqmId">

    <span class="input-group-text custom-label">Rooms:</span>
    <input class="form-control" type="number" value="3" min="0" max="10" step="1" id="roomsId">
  </div>
</div>

javascript Bootstrap 5输入组无法在移动的上垂直调整-如何修复？

1条答案

相关问题

热门标签

最新问答