正确做法是将 progress 嵌入每个 nav-item 内部，用 flex-column 布局，同步更新 aria-current 和 style="width"；禁用外部抽离、仅改 UI 或依赖 CSS 类控制宽度，否则导致可访问性失效、视觉错位与响应式异常。
直接用 nav + flex-column + 内嵌 progress 就能实现，但进度实时更新必须靠 JS 同步控制 style="width: X%" 和 aria-current，不能只改 UI；否则小屏下进度条截断、状态脱节、键盘焦点丢失是高频问题。
为什么不能把 .progress 放在 nav 外面
常见错误是把整个进度条抽出来放在步骤导航上方或下方。这会导致：
- 小屏下
.progress宽度超出容器，被overflow-x: hidden截断（尤其当父级用了col-md-3） -
nav-item高度不一致时，外部进度条无法对齐当前步，视觉断裂 - 响应式切换时，
flex-column下外部progress无法随每步自然堆叠，文字和进度条错位
正确做法：每个 nav-item 内部包含标题、描述、<div class="progress"><div class="progress-bar" style="width: 40%"></div></div>，用 flex-column gap-2 控制间距。
aria-current 和 progress-bar 宽度必须同步更新
用户点“下一步”时，仅加 aria-current="step" 或仅改 style="width" 都不行——两者不同步会破坏可访问性和表单逻辑：
-
aria-current="step"控制屏幕阅读器播报和 CSS 状态样式（如[aria-current="step"] .progress-bar加阴影） -
style="width"必须按实际完成比例动态计算，比如 3 步流程走到第 2 步，宽度应为66.666%，不是硬写67% - 服务端渲染（SSR）页面首次加载时，
aria-current和style="width"必须由后端统一输出，否则 hydration 后状态错乱
示例 JS 更新逻辑：
function updateStep(stepIndex, totalSteps) {<br> const width = (stepIndex / totalSteps * 100).toFixed(3);<br> document.querySelectorAll('.nav-item').forEach((item, i) => {<br> item.setAttribute('aria-current', i === stepIndex - 1 ? 'step' : null);<br> });<br> document.querySelector('.progress-bar').style.width = `${width}%`;<br>}
移动端垂直排列时关键重置项
横向转竖排后，gap、align-items、font-size 不重设，就会出现步间距爆炸、文字偏移、进度条压扁等问题：
- 别依赖
gap-4：它在flex-column下行为不稳定，改用媒体查询里显式写.step-nav { gap: 1.5rem; } -
.nav-link必须覆盖align-items: flex-start，否则竖排时文字随内容高度浮动，导致圆点图标与文字基线错位 - 小屏字体过大撑高
nav-link，加font-size: 0.875rem和line-height: 1.4控制行高 -
.progress-bar高度别写死像素，用h-1（4px）或h-2（8px），避免小屏 DPI 下过粗
进度条嵌入后如何避免文字换行挤压
当某步含长标题或描述时，nav-link 容器内文字折行会撑开高度，导致内部 .progress 被顶出或错位：
- 给
.nav-link加text-truncate+title属性，防溢出 - 进度条容器加
min-height: 1.25rem，保证即使无文字也有基础高度 - 禁用未激活步时，用
tabindex="-1"+pointer-events: none，而非.disabled—— 后者会砍掉键盘焦点，且.progress-bar的width在 disabled 状态下常被 CSS 重置 - 若某步需多段进度（如“上传中 30% → 校验中 70%”），用多个
.progress-bar并列，配合bg-primary+bg-warning类，不用 JS 动态替换 DOM
最易被忽略的是：所有 progress-bar 的 width 值必须是内联 style，不能靠 CSS 类控制——Bootstrap 的 progress-bar 类不支持响应式百分比类（如 w-50），且类名无法动态绑定数值。
