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，旧版bootstrap@5.1.3没有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，值来自$spacersSass 变量，不是像素固定值 - 响应式写法如
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"></button> </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 卡住。
