Bootstrap 5中如何用Stack布局快速垂直排列

Stack组件需Bootstrap 5.2+才原生支持，正确写法为class="stack gap-3"，禁用子元素margin避免间距翻倍，不兼容IE11，响应式需用flex-md-row覆盖方向。

Stack 组件在 Bootstrap 5 中的正确引入方式

Bootstrap 5.2+ 才原生支持 stack 类，低于该版本直接写 class="stack" 不生效。不是所有 CDN 或打包工具默认带最新版，容易误以为“写了没用”。

• 确认版本：检查 bootstrap.min.css 文件头注释，或运行 getComputedStyle(document.body).getPropertyValue('--bs-primary') 看是否能读到 Bootstrap 5 变量
• 如果用 npm：确保安装的是 @popperjs/core + bootstrap@^5.2.0，旧版 [email protected] 没有 stack
• 不要手动写 CSS 模拟 stack，它底层依赖 display: flex + gap + flex-direction 的组合，手写容易漏掉响应式断点逻辑

垂直堆叠的写法和 gap 控制细节

stack 默认就是垂直方向（flex-direction: column），但 gap 值不能只靠 gap-3 这类通用类——它必须和 stack 同时存在，且顺序无关。

• 正确写法：<div class="stack gap-3">...</div>
• gap-0 到 gap-5 对应 0rem ~ 3rem，值来自 $spacers Sass 变量，不是像素固定值
• 响应式写法如 gap-md-4 有效，但 stack-md 不存在——stack 本身不提供方向响应式，要换方向得用 flex-md-row 覆盖
• 避免在子元素上再设 margin，会和 gap 叠加，造成间距翻倍

和旧式 margin 工具类混用时的冲突表现

有人习惯在每个子项加 mb-3 实现垂直间隔，和 stack gap-3 一起用会导致双倍空白，尤其在表单、卡片列表里特别明显。

• 常见错误现象：<div class="stack gap-3"><input class="form-control mb-3"><button class="btn mb-3"></div> → 间隙比预期大一倍
• 正确做法：移除所有子元素上的 mt-<em></em> / mb-，只靠 gap 控制间距
• 如果需要首尾不留空，Bootstrap 没提供 gap-y 子集类，只能额外加 pt-0 pb-0 在容器上微调

浏览器兼容性与 Flex fallback 的实际影响

stack 本质是 flex 封装，IE11 完全不支持，哪怕加了 flex polyfill 也无法让 gap 生效。这不是 bug，是标准限制。

• Chrome 84+、Firefox 63+、Safari 14.1+ 支持 gap；旧 Safari（如 iOS 13.7）需加 -webkit-gap，但 Bootstrap 5.2+ 的 CSS 已自动处理
• 如果项目还需兼容 IE，别用 stack，退回 flex-column + 手动 margin-bottom，或用 row/col 模拟（但语义变重）
• SSR 渲染时无问题，但动态插入子节点后，gap 会立即生效，无需重绘触发

实际用下来，stack 最省心的地方是不用算“最后一个元素要不要去 margin”，最易忽略的是它对父容器 min-height 和 align-items 的隐式依赖——比如内容少时居中偏移，就得加 align-items-start 卡住。