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

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

<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 布局逻辑，且无法解决对齐本质问题；
• 避免将