Bootstrap 表单中按钮与多列内容间出现多余空白的解决方案

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

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

<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 的栅格系统与响应式断点。