Bootstrap 5 的 stack 类仅是 d-flex flex-column 的 CSS 语法糖，无 JS 行为、无响应式切换、不封装对齐或间距逻辑，必须配合 gap-* 类使用，单独使用无效。
Bootstrap 5 的
stack
类不是组件，只是
d-flex flex-column
的快捷写法
它不带任何 JS 行为、无响应式方向切换能力，也不封装对齐或间距逻辑——本质就是一行 CSS 的语法糖：
display: flex; flex-direction: column;
。如果你期望它像 React 的
Stack
组件那样自动处理响应式断点或垂直居中，会直接踩空。
常见错误现象：
看起来没变化？因为没加
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
，而不是依赖某个“高级”工具类名。
例如实现页面中央垂直居中的一组按钮：
原生Bootstrap旋转木马特效
原生Bootstrap旋转木马特效是一款基于jQuery实现的图片轮播切换代码。
下载
By continuing, you agree to our Terms
用
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 子元素：
必须用
appendChild()
或
append()
插入新
.toast
，禁用
innerHTML +=
（会清空已有实例的事件监听）
每个新插入的
.toast
必须显式调用
bootstrap.Toast.getInstance(el)?.show()
，仅加
show
类不够
移动端建议优先用
bottom-0 end-0
，避免状态栏遮挡；
top-0
在 iOS 某些机型上可能被刘海切掉顶部 toast
真正容易被忽略的点是：所有这些堆叠类（
stack
、
vstack
、
hstack
）都不解决「内容尺寸不可控」的问题。按钮宽高不一致、图片加载延迟、字体渲染差异……都会让 flex 布局表现失真。与其花时间调试工具类组合，不如从第一行 HTML 就明确约束子项尺寸和行为。
