如何实现带标签输入组与单个按钮的特定对齐布局？

核心思路是将每个输入/选择框与其标签放在同一列容器内，通过外层flex布局的align-items-end属性，让所有列的底部（即输入框和按钮）对齐，同时标签自然位于对应输入框的上方，完美解决响应式适配问题。

实现代码 #

<div class="row gx-3 align-items-end pb-4">
  <!-- 第一个输入框+标签 -->
  <div class="col-md-3 mb-3 mb-md-0">
    <label class="form-label" for="input1">Label</label>
    <input placeholder="Placeholder" id="input1" class="form-control" />
  </div>
  <!-- 第二个选择框+标签 -->
  <div class="col-md-3 mb-3 mb-md-0">
    <label class="form-label" for="input2">Label</label>
    <select class="form-select" id="input2">
      <option selected value="default">Select</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <!-- 第三个选择框+标签 -->
  <div class="col-md-3 mb-3 mb-md-0">
    <label class="form-label" for="input3">Label</label>
    <select class="form-select" id="input3">
      <option selected value="default">Select</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <!-- 搜索按钮 -->
  <div class="col-md-3">
    <button class="btn btn-outline-secondary w-100 w-md-auto">Search</button>
  </div>
</div>

方案优势 #

• 对齐精准：外层.row的align-items-end确保按钮与所有输入框的底部完全对齐，标签的高度不会影响整体对齐效果。
• 响应式友好：小屏设备下，每个列会自动垂直堆叠，标签始终对应下方的输入框，不会出现错位；大屏下保持横向排列。
• 结构清晰：每个表单控件（标签+输入/选择）是一个独立单元，代码可读性和维护性更强，无需额外的绝对定位或伪元素hack。
• Bootstrap原生支持：完全使用Bootstrap内置类，无需自定义CSS，风格统一且兼容性好。

对比原方案的改进 #

原两行布局将标签和输入框分离，小屏时标签行与输入行无法一一对应；本方案将标签与输入框绑定在同一列，从根本上解决了响应式下的布局混乱问题，同时避免了绝对定位等hack方案带来的兼容性风险。

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