用 nav + flex-column + 断点类可实现纯 CSS 手机端垂直导航，无需 JS 或第三方库；须语义化结构（nav > ul.nav.flex-column > li.nav-item > a.nav-link），正确使用 aria-current 控制状态，移动端需重设 gap、align-items 及字体大小，并统一每步内部 flex-column gap-2 保证视觉对齐。
直接用 nav + flex-column + 断点类就能让导航链接在手机端垂直显示，不需要 JS、不依赖第三方组件，但必须放弃“加个 class 就自动适配”的幻想——它本质是布局流向切换，不是样式开关。
为什么不能硬套 .list-group 或 .nav-tabs
硬套 .list-group 会导致移动端文字换行错乱、箭头伪元素定位漂移、点击区域塌陷；.nav-tabs 强加 flex-column 会破坏下划线定位、激活边框贴合，且语义错误——导航链接不是标签页，不该用 class="active" 驱动状态，而应由 aria-current 控制。
正确结构和关键类组合
必须用语义清晰的 nav 包裹 ul，每个步骤是 li.nav-item，内部用 a.nav-link 承载标题与状态：
-
ul必须带class="nav flex-column"，不是只给父容器加flex-column - 每步必须有
href（哪怕只是#），否则屏幕阅读器无法识别为可聚焦入口 - 当前步设
aria-current="step"，已完成步可选aria-current="true"，不可混用 - 禁用未激活项时，用
tabindex="-1"+pointer-events: none，别用.disabled（它会砍掉键盘焦点）
移动端垂直排列必须重设的 CSS
横向转竖排后，gap 会从水平间距变成垂直间距，若不重设，上下步距离过大；align-items: center 在竖排时会让文字居中偏移，必须覆盖：
- 在
@media (max-width: 576px)中写：.nav.flex-column { gap: 1rem; }，别依赖gap-3（它在flex-column下行为不稳定） -
.nav-link加font-size: 0.875rem和align-items: flex-start，避免文字随内容高度浮动 - 箭头用
::after画时，只对非末项生效：.nav-item:not(:last-child) .nav-link::after - 若字体放大（如用了
fs-5），.badge容易撑开导致错位，需同步控制white-space: nowrap和.badge-sm
最易被忽略的是：移动端垂直排列后，各步高度不一致（比如有的带描述、进度条、按钮），会导致视觉断裂；这不是样式问题，而是结构没对齐——每步内部必须用统一的 flex-column gap-2 控制子元素间距，而不是靠外部 gap 拉齐。
