Bootstrap 5.2.3输入组移动端无法垂直适配的修复方案咨询

嘿，我明白你现在的困扰啦——电脑上好好的输入组，到了移动端就没法自动垂直适配，而且你还不想用row/col-sm这类栅格类来调整。别担心，我给你几个不用栅格就能解决的方案！

方案一：纯用Bootstrap内置Flex类实现（无需额外CSS） #

这个方法直接利用Bootstrap的响应式flex辅助类，让输入组在空间不足时自动换行，同时保证每个标签+输入框的组合保持完整：

<div class="container">
  <hr>
  <h5>1st step: Type the valuations criteria:</h5>
  <!-- 添加flex-wrap实现换行，gap-3增加子项间距 -->
  <div class="input-group input-group-lg input-group-sm mb-3 flex-wrap gap-3">
    <!-- 每个标签+输入框用flex容器包裹，保证组合完整 -->
    <div class="d-flex flex-fill">
      <span class="input-group-text flex-shrink-0" 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 flex-grow-1" id="radiusMetersId" value=300 min="100" max="10000" step="100" data-bs-toggle="tooltip" data-bs-placement="bottom" title="(meters)">
    </div>
    <div class="d-flex flex-fill">
      <span class="input-group-text flex-shrink-0">Sale type:</span>
      <select class="form-control flex-grow-1" id="saleTypeId">
        <option value="apartment">Apartment</option>
        <option value="house">House</option>
        <option value="all">All</option>
      </select>
    </div>
    <div class="d-flex flex-fill">
      <span class="input-group-text flex-shrink-0">Sqm:</span>
      <input class="form-control flex-grow-1" type="number" value="50" min="5" max="100000" step="5" id="sqmId">
    </div>
    <div class="d-flex flex-fill">
      <span class="input-group-text flex-shrink-0">Rooms:</span>
      <input class="form-control flex-grow-1" type="number" value="3" min="0" max="10" step="1" id="roomsId">
    </div>
  </div>
</div>

关键类说明：

• flex-wrap：让外层输入组的子元素在空间不足时自动换行
• gap-3：给每个子项之间添加间距，避免拥挤
• d-flex：把每个标签+输入框组合变成flex容器，保证它们始终在一起
• flex-fill：让每个子组在大屏上均匀分配可用宽度
• flex-shrink-0：防止标签被压缩变形
• flex-grow-1：让输入框占满剩余空间，保证显示完整

方案二：自定义CSS媒体查询适配移动端 #

如果需要更精准的控制，可以通过媒体查询针对移动端调整布局，同样不用栅格类：

首先添加自定义CSS：

/* 针对移动端屏幕（宽度小于768px）调整 */
@media (max-width: 767px) {
  .custom-input-group {
    flex-direction: column;
    gap: 1rem; /* 子项之间的间距 */
  }
  .custom-input-group .input-pair {
    display: flex; /* 保持标签和输入框横向排列 */
  }
  .custom-input-group .input-group-text {
    flex-shrink: 0; /* 防止标签被压缩 */
  }
  .custom-input-group .form-control {
    flex-grow: 1; /* 输入框占满剩余空间 */
  }
}

然后修改HTML结构：

<div class="container">
  <hr>
  <h5>1st step: Type the valuations criteria:</h5>
  <div class="input-group input-group-lg input-group-sm mb-3 custom-input-group">
    <div class="input-pair">
      <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)">
    </div>
    <div class="input-pair">
      <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>
    </div>
    <div class="input-pair">
      <span class="input-group-text">Sqm:</span>
      <input class="form-control" type="number" value="50" min="5" max="100000" step="5" id="sqmId">
    </div>
    <div class="input-pair">
      <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>
</div>

这个方案的好处是可以完全自定义移动端的布局样式，比如调整间距、标签宽度等，灵活性更高。

两种方案都能实现你想要的移动端垂直适配效果，而且都不需要用到row/col-sm类，你可以根据自己的需求选择其中一种~

备注：内容来源于stack exchange，提问作者Je Je