bootstrap 5 中不存在 vstack/hstack 组件，vstack/hstack 仅为 5.3+ 的 flexbox 工具类，等价于 d-flex flex-column/row，无交互逻辑与响应式封装，需配合 gap、align-items 等使用。
Bootstrap 5 没有 VStack 和 HStack
这两个组件根本不存在于 Bootstrap 5 官方 CSS 或 JS 中——它们是 React（比如 Chakra UI、Mantine）或 Flutter 的概念，不是 Bootstrap 的。直接在 Bootstrap 5 项目里写 <vstack></vstack> 或用 class="vstack" 期望获得类似效果，大概率什么都不会发生，或者只是意外触发了某个同名 class 的样式（比如旧版 Bootstrap 的 vstack 工具类，但那不是组件）。
class="vstack" 和 class="hstack" 是 Bootstrap 5 的实用工具类
Bootstrap 5.3+ 确实引入了 vstack 和 hstack 这两个 CSS 类，但它们只是基于 Flexbox 的快捷布局工具，不带任何交互逻辑或响应式断点封装，本质等价于：display: flex; flex-direction: column; 或 flex-direction: row;。
常见错误现象：
- 加了
class="vstack"但子元素没垂直对齐：默认align-items: stretch，内容宽高不一致时容易“撑开”或错位 - 嵌套
hstack在vstack里，子项换行了：因为没设flex-wrap: nowrap（Bootstrap 默认已设，但自定义样式可能覆盖） - 在 IE11 下完全失效：Bootstrap 5 已放弃 IE 支持，
vstack/hstack依赖现代 Flexbox，无降级
实操建议：
- 用
<div class="vstack gap-2"> 替代手写 <code>flex-column+gap组合，更语义化 - 子元素默认占满宽度（
vstack）或高度（hstack），需手动加flex-shrink-0或w-auto控制尺寸 - 响应式控制要靠其他工具类，比如
flex-sm-column，vstack本身不响应
示例：
<div class="vstack gap-2"> <button class="btn btn-primary">Item 1</button> <button class="btn btn-secondary w-auto">Item 2</button> <div class="bg-light border p-2 flex-shrink-0">Fixed-height item</div> </div>
替代 VStack/HStack 的可靠写法
如果你需要真正可控、可复用、带响应式或间距逻辑的堆叠行为，别依赖工具类拼凑。直接用原生 Flexbox 更稳：
- 写
<div class="d-flex flex-column gap-3"> 比 <code>vstack更明确，兼容性一样，且能随时加flex-md-row切换方向 - 需要对齐控制？直接加
align-items-start、justify-content-between，比查vstack文档快得多 - 动态渲染（如 React 中 map 出一堆按钮）？用
flex工具类组合比抽象出VStack组件更轻量、更易调试 - Bootstrap 5.3 文档里确实列出了
vstack和hstack类，但位置在「Utilities → Layout」下，不是组件库，也没配套 JS - 某些第三方 Bootstrap 封装库（如 React-Bootstrap v2+）借用了这些名字做 Wrapper 组件，但那是他们自己的实现，非官方
- 看到别人代码里写了
<vstack></vstack>标签，误以为是 Bootstrap 原生支持——其实大概率是混用了 Chakra UI 或自定义 JSX 组件
性能上没差别，但可维护性提升明显：所有样式意图都在 class 名里，不依赖隐式行为。
为什么有人会以为 Bootstrap 5 有 VStack/HStack？
混淆主要来自三处：
真正在 Bootstrap 5 里做堆叠布局，盯紧 d-flex、flex-column、gap、align-items 这几个关键词就够了。工具类只是捷径，不是新范式。
