bootstrap 5用border-right+flex-grow:1实现横排步骤连接线：非末项.nav-link设border-right，父容器需display:flex；小屏改border-bottom；颜色由[aria-current="step"]等属性选择器驱动，禁用项用tabindex="-1"。
用 border-right + flex-grow: 1 控制横排连接线
Bootstrap 5 没有内置步骤连接线，硬套 .progress 或写死 width 的绝对定位会破坏响应式和缩放表现。正确做法是让连接线“自动伸缩”：给非末项的 .nav-link 加 border-right，再配合 flex-grow: 1 填满剩余空间。
-
.nav-item:not(:last-child) .nav-link设置border-right: 2px solid #e9ecef - 确保父容器是
display: flex（Bootstrap 的.nav默认就是） - 不要给
.nav-link设固定width，否则小屏下连线错位或截断 - 如果用了
text-wrap: wrap，border-right会画在文字下方——此时应改用border-bottom配合竖排布局
用 [aria-current="step"] 驱动连线颜色变化
连线颜色不能靠 JS 动态加 class 控制，否则屏幕阅读器无法感知状态，服务端渲染（SSR）也容易错位。必须用属性选择器直接匹配 aria-current 值。
- 当前步连线变色：
[aria-current="step"] ~ .nav-link { border-right-color: #0d6efd; } - 已完成步的连线也需同步变色：
[aria-current="true"] ~ .nav-link { border-right-color: #198754; } - 别混用
aria-current="true"和aria-current="step"——前者表示“已提交完成”，后者表示“正在编辑”，语义不同，CSS 选择器必须分开写 - 若某步禁用（如未校验通过），用
tabindex="-1"+pointer-events: none，别用disabled属性（它不作用于a标签）
小屏竖排时切换为 border-bottom
横排的 border-right 在宽度小于 576px 时会挤出容器或导致文字重叠，必须用媒体查询重置为垂直连接线。
- 在
@media (max-width: 576px)中移除border-right，改用border-bottom .nav-link { border-bottom: 2px solid #e9ecef; margin-bottom: 1rem; }- 同时设
.step-nav { flex-direction: column; gap: 1rem; }，避免margin-bottom和gap叠加造成过大间距 - 注意：竖排时，
~兄弟选择器仍可用，但[aria-current="step"] ~ .nav-link会选中所有后续项——若只需“已过步骤”的连线变色，得用更精确的结构（如包裹每步的.nav-item上加状态类）
为什么不用伪元素 ::after 画线？
很多教程推荐用 ::after 绝对定位画连接线，但它在真实项目里极易出问题：
- 文字折行后，
top: 50%+transform: translateY(-50%)会偏移，尤其在缩放或动态字体大小时 - 伪元素依赖
position: relative父容器，而 Bootstrap 的.nav-link默认不是相对定位，漏设就会悬空 - 连线长度靠
calc()计算，一旦步骤数量或宽度变化，就得手动调left/width，不可维护 -
z-index控制麻烦：圆点、文字、连线三层叠，稍不注意就遮挡或被遮挡
真正稳定的方案，是让浏览器 layout 引擎自己算——用 flex-grow 和 border，既少代码，又扛缩放、换字体、换设备。复杂点在于状态驱动必须严格对齐 aria-current，而不是靠 JS 操作 class。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
