直接加 flex-column 到 .steps 类无效，因 Bootstrap 无此组件；正确做法是用 nav 作为语义容器，li.nav-item 包裹每步，a.nav-link 带 aria-current 属性控制状态，并在小屏下显式设置 gap 和 align-items。
为什么直接加 flex-column 到 .steps 类没用
Bootstrap 官方根本没提供 .steps 组件，硬套这个类名只会让 CSS 不生效或引发布局错乱。更常见的是误用 .list-group：它默认块级堆叠，但缺少语义状态（比如当前步该由 aria-current="step" 控制，而非 class="active"），屏幕阅读器无法识别进度；伪元素画的箭头在小屏下高度不一致时容易拉长变形；.list-group-item 的 border 和 padding 在 flex-column 下对齐逻辑也不稳定。
正确结构必须用 nav + aria-current
语义容器必须是 nav，每步用 li.nav-item 包裹，入口用 a.nav-link，状态靠属性驱动，不是 class：
-
aria-current="step"表示进行中，aria-current="true"仅用于已完成（部分场景），二者不可混用 - 禁用未激活项时，用
tabindex="-1"+pointer-events: none，别用.disabled（它会砍掉键盘导航） - 移动端垂直排列必须把
flex-column加在nav上，不是父容器或ul - 如果用了 Bootstrap 的 tab 插件切换步骤，
a.nav-link必须带href和data-bs-toggle="tab"，否则 JS 不识别
断点控制要重置 gap 和 align-items
横向转竖排后，gap 从水平间距变成垂直间距，若不重设，小屏上下步距离过大；align-items: center 在竖排时会让文字随内容高度浮动偏移。不能依赖 gap-4 这类响应式工具类——它在 flex-column 下行为不稳定。
- 在
@media (max-width: 576px)中显式写：.step-nav { gap: 1.5rem; } -
.nav-link { padding: 0.75rem 1rem; align-items: flex-start; }强制左对齐，避免文字居中漂移 - 箭头线建议用
border-left+ps-3，比伪元素::after更稳，不依赖父容器高度 - 字体大小建议小屏设为
0.875rem，防止nav-link高度撑开导致行距失衡
嵌入进度条必须放在 nav-item 内部
把 .progress 放在 nav 外面，小屏下极易被截断、文字重叠。正确做法是每个 nav-item 内部包含标题、描述、进度条三部分，用 flex-column gap-2 控制间距：
-
<div class="progress"><div class="progress-bar" style="width: 40%"></div></div>必须在a.nav-link内部 - 进度条高度别写死，用
h-1（4px）或h-2（8px）适配小屏 - 需要多段色块？直接组合
bg-success+bg-warning，不用额外 JS - 进度值要可读？在
.progress-bar里加文本，但用sr-only包裹，兼顾屏幕阅读器
aria-current，客户端 hydrate 后状态就脱节了——这会导致焦点位置、视觉高亮、读屏器播报全部错位。 
