vstack和hstack是Bootstrap 5.3+的纯CSS工具类，等价于d-flex+方向+对齐，无响应式断点与容错机制；父容器未设flex、被样式覆盖或Toast场景下未手动加d-flex均导致失效。
vstack 和 hstack 是 bootstrap 5.3+ 引入的工具类，不是组件，也不带响应式断点或交互逻辑；它们只是 d-flex + 方向 + 对齐的快捷写法，用错地方反而比手写 d-flex 更难调试。
为什么加了 vstack 子元素却没垂直堆叠？
根本原因是：父容器没显式设为 flex 容器，或者被其他 CSS 覆盖了 display 值。
-
vstack内部等价于d-flex flex-column，但若父级（比如.toast-body或自定义div）本身是display: block，那vstack类就挂载失败——它不会“强制升级”父级显示模式 - 检查浏览器开发者工具中该元素的 computed
display是否真为flex；常见干扰源包括：全局重置样式、第三方库覆盖、内联style="display: block" - Toast 场景下，
.toast-container必须手动加d-flex flex-column（vstack在这里不生效），否则多个 Toast 会重叠而非堆叠
hstack 里子项突然换行或溢出？
hstack 默认 flex-wrap: nowrap，它不会自动折行——内容超宽时只会溢出或被截断，不是“堆叠失败”，而是布局预期行为。
- 子元素总宽度 > 父容器可用宽度（含 padding、max-width 限制）是主因；典型诱因：未加
img-fluid的图片、固定width: 200px的按钮、未设w-100的表单控件 -
hstack隐含align-items: center，若子项高度差异大（比如图标 + 多行文字），视觉上可能像“错位”，实际是对齐了；需顶部对齐就加align-items-start - 真要换行？别硬改
hstack，直接换用d-flex flex-wrap gap-2，更可控
和裸写 d-flex flex-column 比，vstack 有什么实际区别？
语义略强，但行为几乎一致；关键差异只在默认对齐方式和组合习惯。
-
vstack等价于d-flex flex-column align-items-stretch；hstack等价于d-flex flex-row align-items-center——注意这个center，裸d-flex flex-row默认是stretch，容易拉伸子项高度 -
vstack不控制子项尺寸：子div默认占满宽度，若内容短（如小图标），会撑开；需加w-auto或flex-shrink-0收敛 -
gap必须显式加（如vstack gap-3），单独vstack不带间距；且不能混用mb-2，否则间距翻倍
响应式切换方向时，vstack/hstack 能不能用断点？
不能。vstack 和 hstack 本身无响应式变体（比如没有 vstack-md），方向切换必须靠其他类覆盖。
- 想在小屏垂直、中屏水平？写
vstack flex-md-row，后者会覆盖前者的flex-direction -
gap类支持响应式（如gap-md-4），但仅控制间距，不改变堆叠方向 - 复杂嵌套（比如 Modal 中的
hstack）建议直接用d-flex开头，避免语义类叠加后对齐逻辑打架
真正容易被忽略的是：这些工具类没有容错机制。一个没关掉的 float、一行漏掉的 flex-shrink-0、或 Toast 容器里忘了 d-flex，都会让 vstack/hstack 表面生效实则失效。与其反复试错，不如在关键容器上直接写明 d-flex flex-column —— 它更直白，也更容易被团队新人看懂。
