bootstrap无内置步骤组件，须用nav+ol语义化结构，aria-current="step"标记当前步，flex-grow动态连线，响应式需媒体查询分层控制，状态同步须与表单校验严格一致。
bootstrap 官方没有 .steps、.step-bar 或 .progress-steps 这类内置组件，所谓“步骤流程图”必须手写语义化结构 + 分层 css 控制，硬套 .progress 会破坏无障碍、键盘导航和状态映射——这不是省事，是给后续埋坑。
用 nav + ol 搭语义化步骤结构
步骤条本质是导航控件，不是数值进度反馈器。必须用 <nav></nav> 包裹有序列表，每步用 <li class="nav-item">，靠 aria-current="step" 标记当前项。
-
aria-current="step"是唯一合规方式；class="active"对屏幕阅读器不可读，也不符合 Bootstrap 5+ 推荐实践 - 每步的
<a></a>的href应指向对应表单锚点（如#step-2），支持浏览器前进/后退 - 服务端渲染时，确保
aria-current属性由后端准确输出；否则 React/Vue hydrate 容易错位
连线用 border-right + flex-grow 动态撑开
别用伪元素硬写箭头，也别用图片或 SVG 做固定连接线。横排时靠 flex-grow: 1 让中间部分自动伸缩，避免断点错位。
- 只在非最后一项画线：
.nav-item:not(:last-child) .nav-link::after，否则底部多一条线 - 推荐用
border-right: 2px solid #e9ecef配合flex-grow: 1，比::after更稳、更易对齐基线 - 小屏竖排时，改用
border-bottom+margin-bottom，并在媒体查询里重置：@media (max-width: 576px) { .nav-link { border-bottom: 2px solid #e9ecef; margin-bottom: 1rem; } }
状态颜色靠属性选择器驱动，禁用 disabled
状态样式必须由 aria-current 属性触发，不能靠 JS 动态加 class。未激活项禁用焦点时，别用 disabled——它会砍掉键盘导航能力。
- CSS 示例：
[aria-current="step"] { color: #0d6efd; font-weight: 600; }、[aria-current="true"] { color: #198754; } - 禁用未激活项：给
<a></a>加tabindex="-1"+pointer-events: none，再配opacity: 0.6 - 已完成状态建议用
aria-current="true"（非"step"），语义更准确；二者不能混用
响应式布局必须分层控制，别只靠 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下对齐逻辑不稳定
最常被忽略的是状态同步时机：表单校验通过后才推进 aria-current，而不是点击就跳；连线长度变化必须与 DOM 状态严格一致，否则键盘用户和读屏软件会感知错乱。
