使用Bootstrap实现Input标签对齐：标签自动换行、输入框保持同行

核心思路 #

借助Bootstrap网格布局固定标签区域宽度，让长标签内容自动换行，同时保证输入框所在列统一对齐，避免因标签长度差异导致输入框错位。

具体实现代码（Bootstrap 5） #

<div class="container mt-4">
  <!-- 长标签行 -->
  <div class="row mb-3 align-items-center">
    <label for="long-label-input" class="col-sm-3 col-form-label text-wrap">
      这是一段超长的标签内容，测试超出宽度后自动换行的效果，确保输入框位置不变
    </label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="long-label-input" placeholder="请输入内容">
    </div>
  </div>

  <!-- 短标签行 -->
  <div class="row mb-3 align-items-center">
    <label for="short-label-input" class="col-sm-3 col-form-label">短标签</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="short-label-input" placeholder="请输入内容">
    </div>
  </div>

  <!-- 超长长标签行 -->
  <div class="row mb-3 align-items-center">
    <label for="super-long-label-input" class="col-sm-3 col-form-label text-wrap">
      又是一段超级长的标签示例，包含连续无空格的longlonglonglonglonglong文本，验证强制换行效果
    </label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="super-long-label-input" placeholder="请输入内容">
    </div>
  </div>
</div>

关键设置说明 #

• 网格布局划分：用row容器配合col-sm-3（标签列）和col-sm-9（输入框列）固定宽度比例，可根据需求调整为col-md-2/col-md-10等适配不同屏幕尺寸。
• 标签自动换行：使用Bootstrap内置的text-wrap类，让标签内容超出宽度时自动换行，无需额外编写基础CSS。
• 垂直居中对齐：给row添加align-items-center类，确保标签和输入框在垂直方向居中，提升视觉一致性。

自定义样式强化（可选） #

如果需要对长单词强制换行，可补充自定义CSS：

.col-form-label {
  word-break: break-all; /* 强制拆分长单词换行 */
  white-space: normal; /* 允许文本换行 */
}

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