本文详解 bootstrap 5 中因 flexbox 默认对齐行为导致的表单列与提交按钮间异常垂直空白问题，并提供精准、语义化、无需 hack 的 css 修复方案。

本文详解 bootstrap 5 中因 flexbox 默认对齐行为导致的表单列与提交按钮间异常垂直空白问题，并提供精准、语义化、无需 hack 的 css 修复方案。

在使用 Bootstrap 5 构建响应式表单时，开发者常遇到如下布局异常：当

内同时包含多列（.col-*）和独立按钮（如 ）时，按钮会“下沉”至整行高度底部，与上方内容之间产生大量不可控的空白——即使已为各列设置固定高度（如 h-25）或移除 mt-* 类，问题依然存在。

根本原因在于：Bootstrap 的 .row 默认采用 display: flex，且其默认 align-items: stretch 会使所有子元素（包括列和按钮）在交叉轴（垂直方向）上拉伸至同一高度。而由于左右两列中各包含多个等高区块（h-25），整个 .row 高度由最高列决定；按钮作为同级 flex 项，也被强制拉伸并居中对齐，视觉上就表现为“悬浮在大片空白中”。

✅ 正确解法是显式覆盖 align-items 行为，将按钮与列内容对齐到顶部：

VPS Bootstrap

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

下载

<div class="row g-4" style="align-items: start;">
  <!-- 左列 -->
  <div class="col-sm-12 col-xl-6 py-xl-2">
    <!-- 3个 h-25 区块 -->
  </div>
  <!-- 右列 -->
  <div class="col-sm-12 col-xl-6 pt-xl-2">
    <!-- 3个 h-25 区块 -->
  </div>
  <!-- 提交按钮（与列顶部对齐） -->
  <button type="submit" class="btn btn-primary">Search</button>
</div>

? 关键点说明：

• align-items: start 是最语义清晰的写法（等价于 flex-start），确保所有子项（列 + 按钮）顶部对齐；
• 避免使用 align-items: flex-start（冗余前缀）或 align-items: baseline（可能导致基线错位）；
• 右列建议将 py-xl-2 改为 pt-xl-2，避免底部内边距加剧视觉割裂；
• 按钮无需额外 col-* 包裹——它本身就是 .row 的直系 flex 项，天然参与对齐计算。

⚠️ 注意事项：

• 不要尝试通过 height 或 min-height 强制约束 .row，这会破坏响应式弹性；
• 避免给按钮添加 mt-auto 或 align-self-end 等反向定位，易引发移动端错位；
• 若需按钮独占一行（如移动端堆叠），应改用 d-grid + gap 布局，而非强行 flex 对齐。

总结：该问题本质是 Flexbox 对齐逻辑与开发者预期的偏差，而非 Bootstrap Bug。通过一行 style="align-items: start" 即可优雅解决，既保持语义结构清晰，又完全兼容 Bootstrap 5 的栅格系统与响应式断点。