<p>Bootstrap 5 的 stack 类仅是 d-flex flex-column 的 CSS 语法糖，无 JS 行为、无响应式切换、不封装对齐或间距逻辑，必须配合 gap-* 类使用，单独使用无效。</p>
Bootstrap 5 的 stack 类不是组件，只是 d-flex flex-column 的快捷写法
它不带任何 JS 行为、无响应式方向切换能力，也不封装对齐或间距逻辑——本质就是一行 CSS 的语法糖：display: flex; flex-direction: column;。如果你期望它像 React 的 Stack 组件那样自动处理响应式断点或垂直居中，会直接踩空。
常见错误现象：<div class="stack">
<div>Item 1</div>
<div>Item 2</div>
</div> 看起来没变化？因为没加 gap，子项紧贴在一起；加了 gap-3 却发现顶部/底部空白异常？那可能是父容器高度未设（比如没加 h-100），或子元素自身有 margin 与 gap 叠加。
-
stack必须和gap-*类成对出现才有实际布局效果，单独用等于白写 - 它不替代
flex-column，反而依赖它——stack内部就是flex-column，所以想改方向只能覆盖：比如加flex-md-row - 不要在子元素上同时用
mb-2和gap-2，否则间距翻倍（尤其表单里输入框+按钮组合最明显）
为什么 vstack/hstack 在 Bootstrap 5.3+ 中仍建议慎用
它们确实是官方工具类（vstack = d-flex flex-column，hstack = d-flex flex-row），但问题不在有无，而在语义模糊和控制粒度太粗。
常见错误现象：加了 vstack，按钮却左右撑满、文字被拉伸；嵌套 hstack 后子项意外换行；在 Safari 旧版本中部分对齐失效。
-
vstack默认align-items: stretch，子项宽度 100%，需手动加w-auto或flex-shrink-0控制尺寸 - 它不响应断点：
vstack-sm不存在，要响应式换向得写vstack flex-md-row，不如直接写d-flex flex-column flex-md-row清晰 - IE11 及更老浏览器完全不支持，且无降级 fallback —— Bootstrap 5 已明确放弃 IE 支持
堆叠 + 居中 + 间距的稳定写法：别拼工具类，用原生 Flex 组合
真正可控的垂直堆叠布局，靠的是明确的 d-flex + flex-column + 对齐类 + gap，而不是依赖某个“高级”工具类名。
例如实现页面中央垂直居中的一组按钮：
<div class="d-flex flex-column align-items-center justify-content-center h-100"> <button class="btn btn-primary">Login</button> <button class="btn btn-outline-secondary mt-2">Sign up</button> <small class="text-muted mt-3">By continuing, you agree to our Terms</small> </div>
- 用
mt-*替代gap更灵活：当某一项需要不同间距时，gap无法单独调控 - 若需响应式堆叠→水平切换，直接加
flex-md-row，比查vstack文档快得多 - 避免给容器设
min-height: 100vh而不用h-100：前者在移动端可能触发双滚动条，h-100依赖父级高度继承，更稳
Toast 堆叠必须用 d-flex flex-column 容器，stack 类在这里无效
Bootstrap 5 的 .toast 元素默认绝对定位、重叠显示，stack 类对 position: absolute 子元素完全不起作用——它只作用于文档流内 Flex 子项。
正确做法是手动构建一个定位容器，并确保所有 .toast 是它的 flex 子元素：
<div class="toast-container position-fixed top-0 end-0 p-3 d-flex flex-column gap-2 z-index-1"> <!-- 动态插入的 .toast 元素会自动堆叠到底部 --> </div>
- 必须用
appendChild()或append()插入新.toast，禁用innerHTML +=（会清空已有实例的事件监听） - 每个新插入的
.toast必须显式调用bootstrap.Toast.getInstance(el)?.show()，仅加show类不够 - 移动端建议优先用
bottom-0 end-0，避免状态栏遮挡；top-0在 iOS 某些机型上可能被刘海切掉顶部 toast
真正容易被忽略的点是：所有这些堆叠类（stack、vstack、hstack）都不解决「内容尺寸不可控」的问题。按钮宽高不一致、图片加载延迟、字体渲染差异……都会让 flex 布局表现失真。与其花时间调试工具类组合，不如从第一行 HTML 就明确约束子项尺寸和行为。
