手机端垂直步骤引导需用nav+flex-column+断点类实现，禁用.list-group和.nav-tabs，正确结构为nav包裹li.nav-item与a.nav-link，状态由aria-current驱动，小屏下须重置gap、padding、字体及使用border-left箭头，进度条嵌入nav-item内。
手机端垂直显示步骤引导，直接用 nav + flex-column + 断点类就能实现，不需要 JS、不依赖第三方组件，但必须放弃“套个 class 就完事”的想法——垂直排列是结构切换，不是样式开关。
为什么不能用 .list-group 或硬改 .nav-tabs
硬套 .list-group 会导致三类问题：移动端文字换行错乱（.list-group-item 默认块级堆叠但无语义状态）、箭头伪元素定位漂移（::after 依赖父容器高度，小屏内容高度不一致时线就歪了）、点击区域塌陷（padding 和 border 在 flex column 下对齐逻辑不稳定）。.nav-tabs 更不行，它内部硬编码了 flex-direction: row !important，加 flex-column 会被覆盖，且下划线和激活边框会贴错位置。
正确 HTML 结构与关键属性
语义容器必须是 nav，每步用 li.nav-item 包裹，入口必须是可聚焦的 a.nav-link，状态由 aria-current 驱动，不是 class="active"：
<nav class="nav step-nav"><li class="nav-item"><a href="#" class="nav-link" aria-current="step">填写信息</a></li> <li class="nav-item"><a href="#" class="nav-link">确认订单</a></li> <li class="nav-item"><a href="#" class="nav-link">支付完成</a></li> </nav>
-
aria-current="step"表示当前进行中；已完成步可用aria-current="true"，但别混用 - 禁用未激活项时，用
tabindex="-1"+pointer-events: none，不是.disabled（后者会砍掉键盘导航） - 不要把
nav套在ul外再加flex-column—— 必须直接加在nav上，否则断点控制失效
移动端垂直排列的 CSS 控制要点
小屏下仅靠 flex-column 不够，必须重置间距、对齐和字体大小，否则视觉断裂、文字偏移、箭头拉长：
- 在
@media (max-width: 576px)中显式设置：.step-nav { gap: 1.5rem; }—— 别依赖gap-4，它在 flex column 下行为不稳定 -
.nav-link { padding: 0.75rem 1rem; align-items: flex-start; }—— 强制左对齐，避免因内容高度不同导致文字上下浮动 - 箭头线建议用
border-left而非伪元素：.nav-item:not(:first-child) .nav-link { border-left: 2px solid #dee2e6; padding-left: 1.5rem; }，更稳，不依赖高度 - 字体大小设为
font-size: 0.875rem，防止小屏下nav-link高度撑开、行距失衡
进度条嵌入与响应式兼容处理
进度条必须嵌在每个 nav-item 内部，而不是单独一行，否则小屏易被截断或重叠：
- 结构示例：
<li class="nav-item">@#@#@#@#@#@#@#@#@#@0<div class="progress h-1"><div class="progress-bar" style="width: 40%"><span class="sr-only">40%</span></div></div> </li> -
h-1（4px）控制进度条高度，避免小屏过粗；宽度用内联style或 CSS 变量动态更新 - 若需多段颜色，用原生
bg-success+bg-warning组合，不用额外 JS - 服务端渲染时，确保初始 HTML 就输出正确的
aria-current，否则客户端 hydrate 后状态脱节
最易被忽略的是：断点类顺序和 DOM 结构稳定性。写成 flex-column flex-md-row 时，flex-md-row 必须在后，否则被覆盖；而 nav 里不能漏掉 href —— 没 href 的 a 标签无法被键盘聚焦，也破坏语义流。这些细节不处理，小屏下不是“不垂直”，而是“垂直但不可用”。
