手机端垂直步骤引导应使用语义化nav+flex-column+断点类实现，禁用.list-group/.nav-tabs；需确保ul.nav.flex-column结构、aria-current状态、tabindex控制可访问性，并在小屏下重设gap、align-items及字体大小。
手机端垂直显示步骤引导，直接用 nav + flex-column + 断点类就能跑通，不需要 JS、不依赖第三方组件；但硬套 .list-group 或 .nav-tabs 会出文字换行错乱、箭头漂移、触控热区缩水三类问题。
为什么不能用 .list-group 或 .nav-tabs
这两个类语义错位、小屏布局不稳定：
• .list-group-item 默认块级堆叠，但没处理行内内容溢出，窄屏下文字强制折行或撑破容器
• 箭头伪元素（如 ::after）依赖父容器高度和 padding，在 flex-column 下对齐逻辑失效，容易拉长变形
• .nav-tabs 强制 flex-direction: row !important，加 flex-column 会被覆盖，且下划线定位、激活边框都失准
• .disabled 类会砍掉键盘焦点，破坏可访问性；而步骤引导必须支持 tab 键导航
nav 结构怎么写才真正可用
必须用语义清晰的 nav 包裹 ul.nav.flex-column，每步是 li.nav-item，内部用 a.nav-link 承载标题与状态：
• ul 必须带 class="nav flex-column"，不是只给父容器加 flex-column
• 每个 nav-link 要有 href（哪怕只是 #），否则屏幕阅读器无法识别为可聚焦入口
• 当前步设 aria-current="step"，已完成步可选 aria-current="true"，不可混用
• 禁用未激活项时，用 tabindex="-1" + pointer-events: none，别用 .disabled
响应式断点与移动端样式重置
Bootstrap 没有 .nav-vertical-md 这种类，真响应式靠工具类叠加：
• 写成 class="nav flex-column flex-md-row"，注意顺序：flex-md-row 必须在 flex-column 后面，否则被覆盖
• 小屏堆叠后，gap 从水平变垂直，若不重设，上下步间距爆炸；建议在 @media (max-width: 576px) 中显式写：.nav.flex-column { gap: 1rem; }，别依赖 gap-3
• 小屏下 .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 没生效，而是你没意识到，小屏堆叠时“高度差”会直接变成上下留白差，必须靠 gap、padding 和 align-items 三层协同控制。
