bootstrap原生无steps组件，需用nav+flex-column+断点类实现真正可用的垂直步骤引导；关键是从结构上按垂直流组织，再通过断点切换布局流向。
Bootstrap 原生不提供 steps 组件，但用 nav + flex-column + 断点类就能做出真正可用的垂直步骤引导——关键不是“把横排改成竖排”，而是从结构上按垂直流组织，再靠断点切换布局流向。
为什么不能直接套 .list-group 或 .nav-tabs
硬套 .list-group 会导致三类问题：移动端文字换行错乱（.list-group-item 默认块级堆叠但没处理行内内容溢出）、箭头伪元素定位漂移（::after 依赖父容器高度和 padding，flex-column 下对齐逻辑不稳定）、点击区域塌陷（padding 被重置后触控热区缩水）。.nav-tabs 强加 flex-direction: column 会破坏下划线定位和激活边框贴合，且语义错误——步骤是线性流程，该由 aria-current 驱动状态，不是 class="active"。
nav 结构怎么写才真正可用
必须用语义清晰的 nav 包裹 ul，每个步骤是 li.nav-item，内部用 a.nav-link 承载标题与状态：
-
ul必须带class="nav flex-column"，不是只给父容器加flex-column - 每步必须有
href（哪怕只是#），否则屏幕阅读器无法识别为可聚焦入口 - 当前步设
aria-current="step"，已完成步可选aria-current="true"，不可混用 - 禁用未激活项时，用
tabindex="-1"+pointer-events: none，别用.disabled（它会砍掉键盘导航）
响应式断点关键：重置 gap、padding 和 align-items
横向步骤条转竖排后，gap 会从水平间距变成垂直间距，若不重设，小屏上下步距离爆炸；align-items: center 在竖排时会让文字随内容高度浮动偏移。实操建议：
- 在
@media (max-width: 576px)中重写：.nav.flex-column { gap: 1rem; }，别依赖gap-3（它在flex-column下行为不稳定） -
.nav-link加font-size: 0.875rem和align-items: flex-start，强制文字左对齐 - 箭头线（如用
border-left）需排除第一步：.nav-item:not(:first-child) .nav-link::before - 进度条必须嵌入每个
nav-link内部，而不是单独一行；<div class="progress"><div class="progress-bar" style="width: 40%"></div></div>宽度用内联style或 CSS 变量动态控制
最容易被忽略的是：移动端垂直排列后，各步高度不一致（比如第一步只有标题，第二步带描述+进度条）会导致视觉断裂——这不是样式没生效，而是你没意识到，gap 和 align-items 的重置必须配合内容高度做统一约束。
