Bootstrap 4表单输入框窄屏适配咨询：缩进与Select拆分问题

没问题，这两个需求/疑问我来给你拆解清楚：

一、输入框换行后左侧缩进的实现方法 #

当然可以实现！这里给你两种靠谱的方案，你可以根据自己的代码结构选择：

方案1：改用Bootstrap网格系统（更推荐） #

这种方式更贴合Bootstrap的响应式设计逻辑，而且能兼容包括Select在内的更多控件。通过row和col类控制标签与输入框的布局，同时利用Bootstrap的间距类实现窄屏缩进：

<div class="row align-items-center">
  <!-- 宽屏时标签占3列，窄屏时占满整行 -->
  <label class="col-sm-3 col-form-label">Selected Folder</label>
  <!-- 宽屏时输入框占9列，窄屏时占满整行，ps-4添加左缩进，ps-sm-0取消宽屏缩进 -->
  <div class="col-sm-9 ps-sm-0 ps-4">
    <input type="text" name="folder" id="folder" class="form-control" value="C:\Users\Paul\Music\AKO">
  </div>
</div>

align-items-center能让标签和输入框垂直居中，ps-4是Bootstrap内置的左内边距类（对应padding-left: 1.5rem），可以根据需要换成ps-3或ps-5调整缩进大小。

方案2：基于现有input-group结构调整 #

如果你不想改动现有布局结构，可以给输入框容器加自定义类，通过媒体查询设置窄屏时的缩进：

<style>
/* 针对Bootstrap的xs断点（屏幕宽度≤575.98px）设置缩进 */
@media (max-width: 575.98px) {
  .input-indent {
    padding-left: 1.5rem; /* 可按需调整缩进值 */
  }
}
</style>

<div class="input-group">
  <div class="input-group-prepend">
    <label class="input-group-text" id="selectfolderaddon">Selected Folder</label>
  </div>
  <div aria-describedby="selectfolderaddon" class="input-indent">
    <input type="text" name="folder" id="folder" class="form-control" value="C:\Users\Paul\Music\AKO">
  </div>
</div>

二、Select组件无法拆分的原因及解决办法 #

这是Bootstrap的设计特性，不是代码或框架的bug。input-group组件的初衷是让输入类控件（如input、textarea）和附加元素形成紧凑的一体化组合，默认不会对<select>元素进行响应式拆分——不管屏幕宽窄，整个input-group都会保持紧凑的横向排列，不会自动换行堆叠。

解决办法同样是改用网格系统替代input-group，这样Select控件也能轻松实现宽屏并排、窄屏堆叠+缩进的效果，和input控件的布局逻辑保持统一：

<div class="row align-items-center">
  <label class="col-sm-3 col-form-label">Select Option</label>
  <div class="col-sm-9 ps-sm-0 ps-4">
    <select class="form-select" aria-label="Select example">
      <option selected>Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Paul Taylor