本文详解如何消除 Bootstrap 5 表单中 .row 内按钮与并列列（.col-*）之间因 Flexbox 默认对齐行为导致的异常垂直空白，核心是通过 align-items: start 覆盖默认的 align-items: stretch。

本文详解如何消除 bootstrap 5 表单中 `.row` 内按钮与并列列（`.col-*`）之间因 flexbox 默认对齐行为导致的异常垂直空白，核心是通过 `align-items: start` 覆盖默认的 `align-items: stretch`。

在使用 Bootstrap 5 构建响应式表单时，开发者常遇到一个典型布局问题：当 元素与多个 .col-* 列同处于一个 .row 容器内时，按钮会与列内容底部对齐，从而在按钮上方产生大量不可见却实际存在的空白区域——即使列内容高度远小于容器高度，视觉上仍显得“悬浮”或“错位”。

根本原因在于：Bootstrap 的 .row 默认采用 display: flex，且未显式设置 align-items 属性，因此继承浏览器默认值 stretch。该值强制所有子项（包括

和 ）在交叉轴（即垂直方向）上拉伸至行内最高子项的高度。由于三组 .h-25 卡片在 .col-xl-6 中被等高拉伸（h-25 是固定高度类，但受 align-items: stretch 影响仍可能被进一步撑开），而 作为独立子项也被强制拉伸至相同高度，其内容（文字）被垂直居中，造成顶部大量留白。

✅ 正确解法：为 .row 添加 align-items: start（对应 Bootstrap 工具类 align-items-start），使所有子项顶部对齐，不再拉伸，按钮恢复自然高度：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

<div class="row g-4 align-items-start">
  <div class="col-sm-12 col-xl-6 py-xl-2">
    <!-- 左侧三组下拉选择框 -->
  </div>
  <div class="col-sm-12 col-xl-6 pt-xl-2">
    <!-- 右侧三组占位卡片 -->
  </div>
  <button type="submit" class="btn btn-primary">Search</button>
</div>

? 提示：也可直接使用内联样式 style="align-items: start"（如原答案所示），但推荐优先使用 Bootstrap 原生工具类 align-items-start，语义清晰、便于维护，且自动适配响应式断点（如 align-items-sm-start）。

⚠️ 注意事项：

• 不要尝试通过 height、max-height 或 h-* 类强行约束 .row —— 这会破坏 Flex 布局逻辑，且无法解决对齐本质问题；
• 避免将

放入 .col-* 内再设 text-center：虽可定位，但会破坏语义结构，且在小屏下易导致按钮宽度失控；

若需按钮始终位于列下方（非同行内），应将其移出 .row，置于 .container-fluid 内并用 mt-3 等间距类控制距离，而非强行“挤压”Flex 行。

总结：理解 Bootstrap Flex 容器的默认对齐行为是解决此类空白问题的关键。align-items-start 是最轻量、最符合语义的修复方案，既保持响应式结构完整性，又精准消除冗余空白，是 Bootstrap 表单布局中的必备实践技巧。