Bootstrap布局：窗口缩小时如何阻止标签挤压输入框错位？

我来给你几个实用的Bootstrap原生方案，完美适配你的需求（标签不能缩短、不能调整col类、输入框需保持水平）：

方案1：Flex布局强制标签与输入框水平对齐（推荐） #

利用Bootstrap的flex工具类，让每个表单组内部变成flex容器，控制标签不被压缩，输入框自动占满剩余空间：

<div class="container">
  <div class="row">
    <section class="mt-2">
      <div class="form-row">
        <!-- 修改后的表单组 -->
        <div class="form-group col-3 d-flex align-items-start">
          <label for="LastPayDate" class="mr-2 flex-shrink-0" style="min-width: 100px;">Last Pay Date</label>
          <input id="LastPayDate" name="LastPayDate" class="form-control flex-grow-1" type="text">
        </div>
        <div class="form-group col-3 d-flex align-items-start">
          <label for="BasePay" class="mr-2 flex-shrink-0" style="min-width: 80px;">Base Pay</label>
          <input id="BasePay" name="BasePay" class="form-control flex-grow-1" type="text">
        </div>
        <!-- 右侧更多输入框保持原有col-3结构即可 -->
      </div>
    </section>
  </div>
</div>

• d-flex：把表单组变成flex容器，让标签和输入框水平排列
• align-items-start：让标签和输入框顶部对齐，保持视觉一致性
• flex-shrink-0：防止标签被压缩变形
• min-width：给标签设置最小宽度，避免文字重叠（你可以根据标签长度调整数值）
• flex-grow-1：让输入框自动占满表单组内的剩余空间

方案2：允许标签换行但输入框始终自适应 #

如果希望标签在窄屏时可以换行，但输入框不会被挤到标签正下方，可以用flex-wrap调整：

<div class="form-group col-3 d-flex flex-wrap align-items-center">
  <label for="LastPayDate" class="mr-2 flex-shrink-0">Last Pay Date</label>
  <input id="LastPayDate" name="LastPayDate" class="form-control flex-grow-1" type="text">
</div>

• flex-wrap：允许flex容器内的元素换行，窄屏时标签会自动换行，但输入框仍会占满剩余宽度，不会被挤到标签下方

为什么text-nowrap会导致重叠？ #

你之前用text-nowrap时，标签强制不换行，但表单组的宽度是固定的col-3，窄屏时标签没有足够空间，就会和输入框重叠。上面的方案通过flex布局分配空间，既保证标签完整显示，又让输入框自适应，完美解决这个问题。

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