Bootstrap 5.2+ 引入的 vstack 是带预设行为（flex-direction: column、align-items: stretch、flex-wrap: nowrap）的语义化垂直堆叠工具类，非简单 flex-column 替代；需通过 CSS 文件注释、getComputedStyle 检查 gap 或明确 npm/CDN 版本确认可用性。
vstack 是 Bootstrap 5.2+ 引入的语义化垂直堆叠工具类，不是“增强版 flex-column”，而是带预设行为的专用封装——它默认启用 flex-direction: column、align-items: stretch，并**强制子项不换行（flex-wrap: nowrap）**。低于 5.2 版本写 vstack 完全无效，这点必须先确认。
怎么确认自己真能用上 vstack
别只看文档版本号，实际运行环境可能滞后：
- 检查
bootstrap.min.css文件头部注释是否含Bootstrap v5.2.0或更高 - 在控制台执行
getComputedStyle(document.body).getPropertyValue('--bs-gap')，有返回值说明支持 gap（vstack依赖它） - 用 npm 安装时明确指定
bootstrap@^5.2.0，旧版bootstrap@5.1.3即使升级 patch 也无vstack - CDN 链接必须带版本号，例如
https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css，不带版本可能回退到缓存旧版
vstack 和 flex-column 的关键行为差异
两者都让子元素垂直排列，但默认约束不同，混用容易出偏移：
-
vstack默认align-items: stretch→ 子项宽度自动撑满容器；flex-column默认align-items: stretch，但若父容器没设宽，子项可能“看起来没撑开” -
vstack内置flex-wrap: nowrap→ 嵌套hstack时不会意外折行；而纯flex-column若被其他样式覆盖了flex-wrap，子项可能换行 -
vstack不提供响应式方向切换（如vstack-md不存在），要改方向只能叠加flex-md-row覆盖；flex-column同样不响应式，但写法更直白，调试时更容易定位 -
vstack与gap类天然协同：vstack gap-3生效；但flex-column gap-3在旧版 Bootstrap（
常见踩坑：为什么加了 vstack 还是不对齐？
最常被忽略的是对齐轴（cross axis）空间不足：
- 子项高度不一致时，
vstack默认align-items: stretch会让短内容被拉高，若想保持原始高度，得显式加align-items-start或align-items-baseline -
vstack容器本身没高度上下文（比如父级min-height: 0或未设height），align-items-center就无效——必须配合min-vh-100、h-100或vh-100等高度类 - 和
mb-3/mt-3混用会导致间距翻倍：vstack 已用gap控制间隔，再给子项加 margin 会叠加，尤其表单里输入框+按钮组合最明显 - IE11 及更早浏览器完全不兼容，
vstack会退化为普通块级流（子项垂直堆叠但无 gap、无对齐控制），不是 bug，是标准限制
真正省事的地方在于不用手动算“最后一个子项要不要去 margin”；最容易被绕进去的点是：它对父容器高度和对齐类生效前提的隐式依赖比想象中更硬性——没高度，align-items-center 就是摆设。
