移动端垂直步骤引导应使用语义化nav+flex-column+断点类实现，禁用.list-group/.nav-tabs；需确保ul.nav.flex-column结构、aria-current状态、tabindex控制可访问性，并在小屏下重设gap、align-items及字体大小。
移动端垂直排列的步骤引导，直接用 nav + flex-column + 断点类就能跑通，不需要 JS、不依赖第三方组件，但必须放弃“套个 class 就完事”的想法——它本质是布局流向切换，不是样式开关。
为什么不能用 .list-group 或 .nav-tabs
硬套 .list-group 会导致三类问题：移动端文字换行错乱（.list-group-item 默认块级堆叠但没处理行内内容溢出）、箭头伪元素定位漂移（::after 依赖父容器高度和 padding，flex column 下对齐逻辑不稳定）、点击区域塌陷（padding 被重置后触控热区缩水）。.nav-tabs 强加 flex-column 会破坏下划线定位和激活边框贴合，且语义错误——步骤不是“标签页”，而是线性流程，该由 aria-current 驱动状态，不是 class="active"。
nav 结构怎么写才真正可用
必须用语义清晰的 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 切换
Bootstrap 没有 .nav-vertical-md 这种类，真响应式靠工具类叠加：class="nav flex-column flex-md-row"，注意顺序——flex-md-row 必须在 flex-column 后面，否则被覆盖。小屏垂直堆叠后，gap 会从水平间距变成垂直间距，若不重设，上下步距离爆炸；箭头线（如用 border-left）在内容高度不一致时容易拉长变形。实操建议：
- 在
@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 - 服务端渲染时若没同步输出
aria-current，客户端 hydrate 后状态脱节，需确保 SSR 和 CSR 状态一致
最易被忽略的是：移动端垂直排列后，各步高度不一致会导致视觉断裂——比如第一步只有文字，第二步带描述和进度条，第三步含按钮。这不是 CSS 写错了，而是你没意识到，flex column 的 align-items: center 在小屏下会让短内容居中，拉大上下间距。必须显式覆盖为 align-items: flex-start，再配合 gap 微调，才能真正对齐。
