Bootstrap 垂直 Tabs 需用 d-none d-md-flex 控制仅中屏以上显示 flex-column 布局，移动端回退横排；nav 与 tab-content 必须同级，data-bs-toggle 和 href/id 匹配缺一不可。
bootstrap 默认的 nav-tabs 和 nav-pills 在小屏下仍保持水平排列，想让 tab 在手机端自动垂直堆叠，不能靠 js 切换类，得用响应式工具类控制显示逻辑。
用 d-none d-md-flex 控制竖排仅在中屏以上生效
垂直 Tabs 在手机上体验差（窄屏+长列表+点击区域小），所以通常只在桌面端竖排、移动端回退为横排。关键不是“强制竖排”，而是“按断点切换布局”。
-
d-none d-md-flex加在竖排的<ul class="nav nav-pills flex-column">外层容器上：小屏隐藏，≥md 屏显示为 Flex 垂直布局 - 对应横排 Tab 用
d-flex d-md-none，确保小屏有可用导航 - 别直接给
nav加flex-column而不加断点控制——否则手机上会撑破视口或文字换行
竖排结构必须用 d-flex 外层容器并列包裹 nav 和 tab-content
Bootstrap 的 Tab 插件不认嵌套结构。如果把 <div class="tab-content"> 放进 <ul> 里，JS 初始化后内容区会消失或错位。
- 正确结构是：
<div class="d-flex"><ul class="nav nav-pills flex-column">...</ul><div class="tab-content">...</div></div> - 竖排时
nav需要固定宽度（如min-width: 12rem或width: 14rem），否则flex-column下nav-link会收缩到文字宽，点击区域变小 - 移动端回退横排时，
tab-content必须和nav同级，否则active类同步失效
Tab 切换时 active 类不同步？检查 data-bs-toggle="tab" 是否漏写
垂直 Pills 的 JS 行为和横排一致，但容易因结构错误导致 active 不自动切换——这不是 Bootstrap 的 bug，而是 DOM 结构没满足插件要求。
- 每个
<li class="nav-item">内的<a>必须带data-bs-toggle="tab"，缺了 JS 就不监听点击 -
href值（如#home）必须和对应<div class="tab-pane">的id完全一致，大小写、符号都不能错 - 别用
onclick手动触发，会绕过 Bootstrap 的状态管理，导致active类残留或丢失
真正麻烦的不是写 CSS，而是保证 nav 和 tab-content 始终同级、data-bs-toggle 全量存在、响应式断点不冲突——这三点漏一个，竖排就变成“看起来像，点不动，或者手机上一团糟”。
