直接套用 .list-group 或 .nav-tabs 在手机上会错乱，因其非“步骤流”语义设计，缺乏 aria-current 状态驱动；应使用 nav + flex-column 构建语义化结构，每步用 nav-item 包裹，nav-link 通过 aria-current="step"/"true" 标识状态，禁用项用 tabindex="-1" + pointer-events: none，并在移动端重置 gap、padding、align-items 及进度条嵌入方式。
为什么直接套 .list-group 或 .nav-tabs 在手机上会错乱
硬套 .list-group 会导致文字换行错位、箭头伪元素定位漂移、点击区域塌陷；.nav-tabs 强行加 flex-direction: column 会破坏下划线定位和激活边框贴合。根本问题在于：它们不是为“步骤流”语义设计的，缺少 aria-current 状态驱动，屏幕阅读器无法识别当前进度。
用 nav + flex-column 构建语义化结构
Bootstrap 没有内置 steps 组件，但 nav 天然适配流程语义：
- 每步必须包裹在
<li class="nav-item">内，<a class="nav-link"></a>作为可聚焦入口 - 状态靠属性控制：
aria-current="step"表示进行中，aria-current="true"表示已完成（不可混用） - 禁用未激活项时，用
tabindex="-1"+pointer-events: none，别用.disabled（它会砍掉键盘焦点） - 移动端垂直排列靠
flex-column加在nav上，不是ul或父容器
移动端关键重置：gap、padding、align-items
横向转竖排后，gap 会从水平间距变成垂直间距，若不重设，小屏上下步距离过大；align-items: center 在竖排时会让文字随内容高度浮动偏移。
- 在
@media (max-width: 576px)中显式重写：.step-nav { gap: 1.5rem; }（别依赖gap-4，它在flex column下行为不稳定） -
.nav-link { padding: 0.75rem 1rem; align-items: flex-start; }—— 强制文字左对齐 - 字体过大撑开行高？加
font-size: 0.875rem或fs-sm - 箭头线（如用
border-left）需排除第一步：.nav-item:not(:first-child) .nav-link::before
进度条必须嵌入每步内部，不能单独一行
常见错误是把 <div class="progress"> 放在 <code>nav 外面，结果小屏下被截断、文字重叠。
- 每个
nav-item内部包含标题、描述、进度条三部分，用flex-column gap-2控制间距 -
<div class="progress"><div class="progress-bar" style="width: 40%"></div></div>必须在nav-link内部 - 进度条高度别写死——用
h-1（4px）或h-2（8px），避免小屏过粗 - 需要多段进度？用原生
bg-success+bg-warning类组合，不用额外 JS
style 或 CSS 变量动态控制，且 nav 容器必须显式设 display: flex 和 flex-direction: column，否则在旧版 Safari 或某些 Android WebView 中，flex-column 类可能不生效。
