应使用语义化 nav 包裹 ul.nav.flex-column，每步为 li.nav-item 内含 a.nav-link；进度条须嵌入 nav-link 内，响应式用 flex-column flex-md-row 且顺序不可颠倒，小屏需重置 gap、padding 和 align-items。
用 nav + flex-column 搭语义化结构，别碰 .list-group
Bootstrap 没有 .steps 或 .progress-steps 组件，硬套 .list-group 会崩：移动端文字换行错乱、箭头伪元素漂移、点击热区塌陷；.nav-tabs 强加 flex-direction: column 会破坏下划线定位和边框贴合。必须用语义清晰的 nav 包裹 ul.nav.flex-column，每步是 li.nav-item，内部用 a.nav-link 承载标题与状态。
关键点：
-
ul必须带class="nav flex-column"，不是只给父容器加flex-column - 每步
a要有href（哪怕#step-1），否则屏幕阅读器无法识别为可聚焦入口 - 当前步设
aria-current="step"，已完成步可用aria-current="true"，不可混用 - 禁用未激活项时，用
tabindex="-1"+pointer-events: none，别用.disabled（它砍掉键盘焦点）
进度条必须嵌进每个 nav-link 内部
把 <div class="progress"> 放在 <code>nav 外面，小屏下会被截断、文字重叠、高度塌陷。正确做法是：每个 nav-link 内部包含标题、描述、进度条三部分，用 flex-column gap-2 控制间距。
实操建议：
-
<div class="progress"><div class="progress-bar" style="width: 40%"></div></div>必须写在a.nav-link标签内 - 进度条宽度用内联
style或 CSS 变量动态控制，别依赖 JS 拼字符串 - 高度别写死，用
h-1（4px）或h-2（8px），避免小屏过粗 - 需要多段色块（如已完成/进行中/待办），直接叠加
bg-success+bg-warning类，不用额外 DOM - 若需显示进度文本（如“40%”），放在
.progress-bar内，但用<span class="sr-only"></span>包裹，保证读屏友好
小屏垂直排列必须重置 gap、padding 和 align-items
横向步骤条转竖排后，gap 从水平间距变成垂直间距，不重设会导致上下步距离过大；align-items: center 在竖排时会让文字随内容高度浮动偏移——这些不是“默认就对”，必须手动覆盖。
在 @media (max-width: 576px) 中写：
.step-nav {
gap: 1.5rem;
}
.nav-link {
padding: 0.75rem 1rem;
align-items: flex-start;
}
注意：
- 别依赖
gap-4这类响应式工具类，它在flex-column下行为不稳定 - 字体过大撑开行高？加
font-size: 0.875rem或fs-sm - 箭头线（如用
border-left）要排除第一步：.nav-item:not(:first-child) .nav-link::before
响应式切换靠 flex-md-row，顺序不能错
Bootstrap 没有 .nav-vertical-md 这种类，真响应式靠工具类叠加：class="nav flex-column flex-md-row"。但顺序很重要：flex-md-row 必须在 flex-column 后面，否则被覆盖，中屏仍垂直堆叠。
其他要点：
- 大屏横排时，非末项画箭头用
.nav-item:not(:last-child) .nav-link::after，避免底部多一条线 - 小屏下进度条若被文字遮挡，检查是否漏了
z-index或父级overflow: hidden - 服务端渲染时，确保
aria-current属性由后端准确输出，否则客户端 hydrate 后状态脱节 - 最易被忽略的是：各步高度不一致（比如有的带描述+进度条，有的只有标题），会导致视觉断裂——这不是 bug，是布局逻辑本身要求你主动控制每步最小高度或内容对齐方式
