Bootstrap原生不支持步骤导航条在手机端自动转为下拉菜单，必须通过JavaScript动态生成<select>并双向同步状态，否则小屏下会错乱或溢出。
Bootstrap 原生不支持步骤导航条（step wizard）在手机端自动转为下拉菜单——它没有内置的 data-bs-toggle="steps-select" 这类机制，也不存在“一步配置就响应式切换”的类名。必须手动监听视口、动态生成 <select> 并同步状态，否则小屏下仍会堆叠错乱或溢出。
为什么不能直接用 .nav-tabs 或 .list-group 加媒体查询实现
硬套 .nav-tabs 后加 @media (max-width: 576px) { flex-direction: column; } 只能垂直排列，但无法压缩成单行下拉；.list-group 缺少语义化流程状态（如 aria-current="step"），屏幕阅读器无法识别当前进度；两者都无原生 change 事件绑定能力，无法触发步骤跳转逻辑。
用 JavaScript 动态生成 <select> 并绑定切换
核心是运行时 DOM 替换，不是纯 CSS 切换。需在窗口 resize 和初始加载时判断断点（如 matchMedia("(max-width: 576px)")），再执行以下操作：
- 遍历所有
.nav-item，提取<a>的textContent和href（或data-step-id） - 创建
<select class="form-select d-md-none">，每个<option>的value设为对应步骤标识符 - 监听
change事件：调用bootstrap.Tab.getInstance(tabEl).show()（若步骤用 Tab 实现）或手动更新aria-current和高亮类 - 同步 URL 锚点：设置
location.hash = option.value，并监听hashchange回填 select 的selectedIndex - 保留键盘可访问性：展开后聚焦
select，按Enter或Space触发切换
移动端下拉菜单与桌面步骤条的状态必须双向同步
常见错误是只处理 select → 步骤跳转，却忽略反向同步（比如用户点击桌面版某步，select 下拉值未更新）。需统一状态源：
- 用一个变量（如
currentStepId）作为唯一真相源 - 所有交互（click、change、hashchange）都先更新该变量，再驱动 DOM 变更
- 桌面版每步
<a>的aria-current属性必须由 JS 动态写入，不能靠静态class="active" -
<select>的value每次都要显式赋值，避免因异步导致 UI 脱节
最易被忽略的是 resize 重置逻辑：平板横竖屏切换时，若未重新检测断点并重建 select，会出现“小屏下两个菜单并存”或“大屏下仍显示 select”的错乱。务必在 matchMedia.addListener() 中完整执行 DOM 替换与事件解绑。这不是样式问题，而是状态生命周期管理问题。
