欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

Bootstrap 5輸入組不能在手機(jī)上垂直調(diào)整-如何解決？

CSS

使用boostrap5.2.3。我有一個(gè)輸入組，它顯示一組跨度& quot。輸入-組-文本& quot輸入為& quot。表單控制& quot。 它在電腦屏幕上可以正常工作，但在手機(jī)上不能垂直調(diào)節(jié)。

我當(dāng)前的代碼如下(盡量不使用行/列):

<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>

我使用這些標(biāo)題:

<!-- 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>

見下圖:(最后一張圖是我想在手機(jī)上):

Computer display:

Mobile disply

Desired display on mobile

<head>
<link  rel="stylesheet"><link rel="stylesheet" >
</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>

使用媒體查詢我們可以實(shí)現(xiàn)它

@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  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>