Bootstrap 官方无内置步骤组件，须用语义化 nav+ol 结构实现：nav 包裹有序列表，li 为 nav-item，a 为 nav-link，靠 aria-current="step" 标记当前步；连接线用 border-right/border-bottom + flex-grow；状态样式由 aria-current 驱动；响应式需媒体查询分层控制，禁用项用 tabindex="-1" + pointer-events: none；校验逻辑必须与 UI 同步。
Bootstrap 官方没有 .steps、.step-bar 或任何内置的步骤流程图组件，所谓“带连接线的响应式步骤流程图”，必须用语义化结构 + 分层 CSS 实现，硬套 .progress 或第三方封装会破坏无障碍、键盘导航和状态映射——这不是省事，是给后续埋坑。
用 nav + ol 搭语义化结构，别用 div 堆砌
步骤条本质是导航控件，不是数值反馈器。必须用 <nav></nav> 包裹有序列表，每步用 <li class="nav-item">，链接用 <a class="nav-link"></a>，靠 aria-current="step" 标记当前项：
-
aria-current="step"是唯一被屏幕阅读器识别的“当前步”方式；class="active"对读屏软件不可读，也不符合 Bootstrap 5+ 推荐实践 - 每步
<a></a>的href应指向对应表单锚点（如#step-2），支持浏览器前进/后退和锚点跳转 - 服务端渲染时，确保
aria-current属性由后端准确输出；否则 React/Vue hydrate 容易错位 - 禁用未激活项时，不用
disabled（它砍掉键盘焦点），改用tabindex="-1"+pointer-events: none
连接线用 border-right + flex-grow，别用伪元素硬画
横排时靠 flex-grow: 1 让中间部分自动伸缩，避免断点错位。伪元素或绝对定位在文字折行后极易偏移，尤其小屏下连线拉长、断裂或悬空：
- 只在非最后一项画线：
.nav-item:not(:last-child) .nav-link加border-right: 2px solid #e9ecef，再设flex-grow: 1 - 小屏竖排时，移除
border-right，改用border-bottom: 2px solid #e9ecef+margin-bottom: 1rem - 媒体查询里重置：
@media (max-width: 576px) { .nav-link { border-bottom: 2px solid #e9ecef; margin-bottom: 1rem; } } - 别用
transform: scaleX()或内联style.width控制连线长度——容易卡顿且缩放中心偏移
状态颜色与图标必须由 aria-current 属性驱动
状态样式不能靠 JS 动态加 class，否则读屏器无法感知，也不利于 SSR/hydrate 同步：
- 当前步：
[aria-current="step"] { color: #0d6efd; font-weight: 600; } - 已完成步：
[aria-current="true"] { color: #198754; }（注意：不要混用"true"和"step"） - 图标统一用伪元素：
.nav-link::before生成圆点或对勾，尺寸用rem，垂直对齐靠vertical-align: middle - 未激活项禁用焦点时，加
opacity: 0.6+tabindex="-1"+pointer-events: none，别用disabled
响应式布局必须分层控制，别只靠 d-flex flex-column
硬套 d-flex flex-column 到移动端，会导致文字折行、箭头拉长、间距爆炸。真正可控的是网格 + 媒体查询双控：
- 大屏用
col-12 col-md-3均分，配合d-flex横向排列 - 小屏加独立媒体查询：
@media (max-width: 576px) { .step-nav { gap: 1rem; } .step-nav .nav-link { padding: 0.75rem 1rem; font-size: 0.875rem; } } - 别依赖
gap-3这类工具类——它在flex-column下行为不稳定，间距会随内容高度浮动 - 字体大小建议小屏降到
0.875rem，防止nav-link高度撑开导致行距失衡
最常被忽略的点是：状态同步必须绑定表单校验逻辑，不能只改 UI。用户点“下一步”前，必须调用 checkStepValidity() 校验当前步字段，否则会出现“进度走到第 3 步，但第 2 步邮箱根本没填”的逻辑断裂。
