Bootstrap 4 步骤条连线需用 flex-grow:1 + border-right/border-bottom 实现响应式动态延伸，小屏竖排时改用 flex-column 和 border-bottom，状态颜色须通过 aria-current 属性精准控制后续所有连线。
Bootstrap 4 没有内置步骤条连线功能，必须用 flex 布局 + border-right（横排）或 border-bottom（竖排）手动实现；伪元素或 transform 定位容易在小屏文字折行后错位，不推荐。
用 flex-grow: 1 配合 border-right 实现动态连线
横排步骤条的连线不能靠固定宽度或 transform: scaleX()，否则响应式断点下会拉伸变形或基线偏移。正确做法是让非末项的 .nav-link 自动撑开剩余空间，并用边框当线：
-
.nav-item:not(:last-child) .nav-link加border-right: 2px solid #e9ecef - 父容器设
display: flex，子项加flex-grow: 1让连线随窗口缩放自动延伸 - 必须配合
min-width: 0防止长文本撑开节点导致间距失衡 - 别给
.nav-link设width或flex-basis，否则等分失效
小屏竖排时改用 border-bottom 并重置布局
Bootstrap 4 的 flex-column 工具类在移动端可用，但仅靠它不够——连线方向、间距、对齐都需单独控制：
- 媒体查询里加
@media (max-width: 576px)，将.nav改为flex-direction: column - 移除
border-right，改用.nav-item:not(:last-child) .nav-link { border-bottom: 2px solid #e9ecef; margin-bottom: 1rem; } -
.nav-link字体建议降为font-size: 0.875rem，避免高度不一致导致圆点图标上下偏移 - 禁用
white-space: nowrap，允许文字折行，否则竖排时节点高度突变、连线断裂
状态连线颜色要和 aria-current 同步，别用 class 切换
连线颜色变化不是装饰问题，而是状态可访问性的关键。Bootstrap 4 不识别 class="active" 对屏幕阅读器的意义，必须用属性驱动：
- 已完成步骤：用
[aria-current="true"] ~ .nav-item .nav-link选中其后的所有连线，设border-color: #198754 - 当前步骤：用
[aria-current="step"] ~ .nav-item .nav-link选中后续未完成部分，设灰阶色 - 绝对避免写
.step-active + .step::before这类依赖相邻兄弟的选择器——DOM 插入顺序稍变就失效 - 服务端渲染时，
aria-current必须由后端准确输出；JS 只负责校验后同步更新，不能替代语义
最易被忽略的是：连线颜色变更必须覆盖到“所有已通过步骤之后的线段”，而不是只画当前步到下一步那一截——否则读屏用户无法感知整体进度，键盘焦点跳转时也会丢失上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
