bootstrap官方无steps组件，须用nav+aria-current+内嵌progress实现：progress必须置于nav-item内部而非外部，否则小屏截断、对齐失准、语义丢失；状态由aria-current属性驱动，禁用步用tabindex="-1"+pointer-events:none，响应式需重置gap、padding及连线方式。
Bootstrap 官方没有 steps 组件，所谓“带进度显示的响应式步骤指示器”，必须用 nav + aria-current + 内嵌 progress 实现；硬套 .progress 外部包裹或用 JS 动态算 width，会导致小屏截断、文字重叠、键盘焦点丢失。
为什么不能把 progress 放在 nav 外面
常见错误是写成：<div class="progress"><div class="progress-bar" style="width: 40%"></div></div>
<nav class="nav">...</nav>。这样在手机竖屏下，progress 容器会被父级截断，且无法与对应步骤对齐——因为进度条脱离了语义上下文，宽度控制和文字基线都失联。
- 正确做法：每个
nav-item内部包含标题、描述、progress三部分，用flex-column gap-2控制间距 -
progress高度必须用h-1（4px）或h-2（8px），别写死height: 6px，否则缩放时粗细突变 - 宽度必须用内联
style="width: 40%"或 CSS 变量（如style="width: var(--step-progress, 0%)"），不能靠 JS 操作offsetWidth计算
aria-current 怎么驱动进度和状态样式
所有状态逻辑必须由属性触发，不是 class。Bootstrap 5+ 明确推荐 aria-current="step" 表示当前步，aria-current="true" 表示已完成（二者不可混用）。
-
[aria-current="step"] .progress-bar→ 设background-color: #0d6efd -
[aria-current="true"] .progress-bar→ 设background-color: #198754 - 未激活项的
.progress-bar用background-color: #e9ecef，别用透明或opacity: 0.3，否则屏幕阅读器无法感知进度存在 - 禁用未激活步时，给
nav-link加tabindex="-1"+pointer-events: none，而不是disabled—— 后者会砍掉键盘 Tab 导航
响应式断点下怎么重置连线、gap 和对齐
横排转竖排后，gap 从水平间距变成垂直间距，align-items: center 在竖排时会让文字居中偏移，必须覆盖。
- 大屏默认横排：加
flex-md-row；小屏强制竖排：只写flex-column（Bootstrap 5+ 移动端默认就是 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-bottom替代border-right，并配margin-bottom: 1rem，比伪元素::after更稳，不依赖父容器高度
移动端字体撑开导致进度条错位怎么办
手机上默认 font-size 较大，nav-link 高度被撑开后，progress 的 vertical-align 会失效，出现进度条浮高或下沉。
- 直接在媒体查询里设：
@media (max-width: 576px) { .nav-link { font-size: 0.875rem; } } - 别用
fs-sm工具类——它在某些 Bootstrap 版本里未启用或未生效 - 如果用了多行描述文本，加
line-height: 1.4控制行高，避免gap-2失效 - 进度条里的文字（如 “40%”）必须用
sr-only包裹，否则小屏下易换行压住圆点图标
真正难的不是写样式，而是让 aria-current 始终与表单校验状态严格同步——比如用户跳过第 2 步，后端返回 aria-current="true" 到第 3 步，但第 2 步字段仍是空的，这时 progress-bar 宽度再准也没用。
