响应式步骤条应使用 nav + flex-column + 断点类实现，放弃一步封装幻想；需语义化结构（nav-item/li + nav-link/a）、属性驱动状态（aria-current）、移动端重置 gap/padding/align-items，并将进度条嵌入每步内部。
nav + flex-column + 断点类就能实现，不用 JS、不依赖第三方组件，但必须放弃“一步封装”的幻想——响应式步骤条本质是布局逻辑切换，不是样式开关。
为什么不能直接套 .list-group 或硬改 .nav-tabs
硬套 .list-group 会导致移动端文字换行错乱、箭头伪元素定位漂移、点击区域塌陷；.list-group-item 默认是块级堆叠，但缺少语义状态驱动（比如当前步该由 aria-current 控制，而非 class="active"），屏幕阅读器无法识别流程进度。强行给 .nav-tabs 加 flex-direction: column 会破坏下划线定位、激活边框贴合和间距。
正确结构：用 nav 做语义容器，nav-link 承载每步
- 每步必须包裹在
li.nav-item里，a.nav-link作为可聚焦入口，状态靠属性驱动：aria-current="step"表示进行中，aria-current="true"表示已完成（部分场景），不可混用 - 禁用未激活项时，用
tabindex="-1"+pointer-events: none，别用.disabled（它会砍掉键盘焦点） - 移动端垂直排列靠
flex-column，但必须加在nav上，不是ul或父容器 - 大屏默认横排？加
flex-md-row；小屏强制竖排？只写flex-column即可（Bootstrap 5+ 默认移动端flex-column）
移动端关键重置：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; }—— 强制文字左对齐，不随内容高度浮动 - 字体过大导致行高撑开？加
fs-sm或自定义font-size: 0.875rem在媒体查询里 - 箭头线（如用
border-left）需排除第一步：.nav-item:not(:first-child) .nav-link::before
进度条嵌进每步内部，而不是单独一行
常见错误是把 .progress 放在 nav 外面，结果小屏下进度条被截断、文字重叠。正确做法是：每个 nav-item 内部包含标题、描述、进度条三部分，用 flex-column gap-2 控制间距。
-
<div class="progress"><div class="progress-bar" style="width: 40%"></div></div>必须在nav-link内部，且宽度用内联style或 CSS 变量动态控制 - 进度条高度别写死——用
h-1（4px）或h-2（8px），避免在小屏上过粗 - 需要堆叠多段进度？用 Bootstrap 原生的
progress-bar bg-success+bg-warning类组合，不用额外 JS - 进度值要可读？在
.progress-bar里加文本，但记得用sr-only包裹，屏幕阅读器友好
aria-current 必须服务端同步输出，否则客户端 hydrate 后状态脱节；还有，flex-column 下的 gap 和 padding 不是“调一下就好”，它们在不同字体缩放、行高、内容高度下表现极不稳定，必须在媒体查询里显式重置。
