本文详解如何消除 bootstrap 5 中 .row 容器内按钮与并列列（.col-*）之间异常的垂直空白，核心在于理解 flexbox 默认对齐行为，并通过 align-items: start 精准控制子项垂直对齐方式。
本文详解如何消除 bootstrap 5 中 `.row` 容器内按钮与并列列（`.col-*`）之间异常的垂直空白，核心在于理解 flexbox 默认对齐行为，并通过 `align-items: start` 精准控制子项垂直对齐方式。
在使用 Bootstrap 5 构建响应式表单时，开发者常遇到一个看似简单却令人困扰的问题：当
根本原因在于 Bootstrap 的 .row 是一个 Flex 容器（默认 display: flex），其子元素（列和按钮）作为 Flex 项目，默认继承 align-items: stretch 行为。这意味着所有子项（包括按钮）会尝试拉伸以填满容器的最大高度——而该高度由列中最高的 .bg-secondary 卡片决定（例如三块 h-25 区域叠加了 mt-2 间距后形成的总视觉高度）。按钮虽无显式高度，却被强制拉伸至该高度，再结合其自身默认的 margin 和文本基线对齐，最终表现为顶部大片空白。
✅ 正确解法：覆盖默认对齐方式
只需为 .row 添加 align-items: start（Bootstrap 5 内置类为 align-items-start），即可让所有子项（列与按钮）统一沿 Flex 容器顶部对齐，不再拉伸，从而彻底消除多余空白：
<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>? 关键细节说明：
- 使用 align-items-start（而非 flex-start）确保与 Bootstrap 5 命名规范一致；
- 将按钮保留在 .row 内（不移出），维持语义化布局结构；
- 移除原代码中