Bootstrap不提供步骤指示器自动折叠功能，需手动结合collapse插件、响应式类和语义结构实现；单纯flex-column竖排无法解决小屏信息过载，必须用collapse包裹步骤导航并配合navbar-toggler触发展开/收起。
Bootstrap 本身没有“步骤指示器自动折叠隐藏”这种开箱即用的组件——它不提供「小屏下把多步流程收进一个可展开面板」的默认行为。你需要手动组合 collapse 插件 + 响应式类 + 语义结构来实现，否则在手机上会挤成一团、文字重叠、点击区域失效。
为什么不能直接用 .step-nav + flex-column 应对小屏
单纯让步骤条竖排（如用 flex-column）只是布局调整，并未解决「信息过载」问题：5 步流程在 iPhone SE 屏幕上仍会占满整屏高度，用户必须滚动才能看到内容主体。真正的“折叠隐藏”，是把步骤项收进一个可点开的容器里，只留标题或当前步摘要。
- 硬套
nav+flex-column后，.nav-link仍全部渲染在 DOM 中，无障碍阅读器会一次性读出全部步骤，破坏流程感知 - 没加
collapse控制，就不存在“隐藏”动作；d-none d-md-block这类类只能做断点显隐，无法实现「点击展开/收起」交互 - 如果步骤含描述、图标、进度条等复杂子结构，竖排后行高撑开、文字换行错乱、箭头伪元素定位漂移等问题会立刻暴露
用 collapse 实现点击展开的步骤面板（Bootstrap 5）
核心是把整个步骤导航包裹进 <div class="collapse">，再用 navbar-toggler 或自定义按钮触发。注意：必须保留语义结构，不能只为视觉隐藏而删减 nav-item 和 aria-current。
- 外层用
<nav class="navbar navbar-expand-md">，确保大屏横排、小屏默认折叠 - 步骤列表放入
<div class="collapse navbar-collapse" id="stepsCollapse">，不是<ul>直接挂载 - 触发按钮写在
navbar-brand之后、navbar-collapse之前：<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#stepsCollapse">…</button> - 每步仍保持
<li class="nav-item"><a class="nav-link" aria-current="step">结构，状态由属性驱动，不可省略 - 小屏下想默认收起？加
show类到navbar-collapse就会默认展开；不加则默认隐藏
手机端点击后菜单不收起？检查这三个地方
常见现象是：点步骤链接跳转后，折叠面板还开着，遮挡内容。这不是 Bug，而是 Bootstrap 5 的默认行为——它只监听 .navbar-toggler 点击，不自动关闭已展开的 collapse 区域。
- 给每个
.nav-link加data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show"，让它在跳转同时触发收起 - 不要写死
data-bs-target="#stepsCollapse"，用.navbar-collapse.show可精准匹配当前已展开的那个容器（尤其页面有多个 collapse 时） - 如果用了锚点跳转（如
href="#step3"），同样要加上述两个 data 属性，否则平滑滚动完成，面板还开着
折叠后怎么显示当前步摘要？别用 JS 拼接
小屏折叠状态下，用户需要一眼知道“我现在在哪一步”。与其用 JS 动态更新摘要栏，不如用 CSS + 属性选择器控制显示：
- 在
nav外加一个摘要区：<div class="d-md-none step-summary"><span>第 2 步：填写信息</span></div> - 用
[aria-current="step"]::before提取当前步文本（需配合content: attr(aria-label)或预设data-summary属性） - 更稳妥的做法：给每个
.nav-link加data-summary="第 X 步：xxx"，再用.step-summary [aria-current="step"]::before { content: attr(data-summary); } - 避免在
collapse内部放摘要——它随折叠一起隐藏，起不到提示作用
真正难的不是怎么写 collapse，而是判断哪些步骤该收、哪些该留、摘要文案是否足够无歧义。移动端空间极其有限，强行塞进 7 步流程只会让用户放弃阅读。先砍步骤，再做折叠，比堆砌交互更重要。
