推荐用 list-group 手动构造步骤标号，优先内联数字（如 1.、2.）确保稳定性；通过自定义 .done 类区分已完成步，配合 .active 标识当前步；小屏用 flex 布局防错位，图标需配 aria-label 并设文本兜底。
用 bootstrap 的 list-group + 自定义计数器实现步骤标号
bootstrap 本身不提供原生的「带数字序号的步骤流程图」组件，breadcrumb 是路径导航，progress 是进度条，都不带步骤标题和编号控制。最轻量、可控性最强的做法是用 list-group 手动构造，配合 css 计数器或内联数字。
常见错误是硬套 nav 或 steps 第三方插件，结果样式冲突、响应式错乱，或者 JS 初始化失败导致编号不显示。
- 用
<ol></ol>+list-group-item混用会破坏语义且编号样式难统一 - 纯 CSS
counter-reset在 Bootstrap 5+ 中需注意list-group-item默认display: block，必须显式设counter-increment - 推荐直接写数字（如
1.、2.），避免依赖 CSS 计数器——尤其当步骤动态渲染或服务端渲染时更稳
bootstrap 5 下带状态标记的步骤项怎么加 active / done 样式
步骤引导的核心交互是标识当前步（active）和已完成步（done），但 Bootstrap 没有内置 .done 类。得靠自定义 class 或复用已有语义类。
典型场景：表单分步提交、向导页、安装流程。不能只靠 .active，因为「已完成」和「当前」视觉上必须区分（比如绿色对勾 vs 蓝色高亮）。
- 给已完成项加
class="done"，然后在 CSS 里写.list-group-item.done { background: #e8f5e9; border-left: 4px solid #4caf50; } -
.active保留给当前步骤，避免和.done冲突（二者不共存于同一项） - 别用
.disabled表示「未开始」——它会让文字变灰且不可交互，实际常需点击跳转回某步 - 如果用 JS 控制状态，确保每次切换时清除所有
.active和.done，再按逻辑重设
响应式折叠：小屏下步骤标号和文字堆叠错位怎么办
在手机上，list-group-item 默认是块级，但若你把序号放在浮动元素或 flex 容器里，容易出现文字换行后序号悬空、对不齐。
这不是 Bootstrap bug，而是 flex 布局在小屏下 flex-wrap 或 min-width 处理不当导致的。
- 放弃
float: left做序号 —— 已过时且难响应 - 用
display: flex包裹序号和文字，设flex-direction: column（竖排）或flex-wrap: wrap（横排自动折） - 给序号容器设固定
width: 2rem和text-align: center，避免数字宽度影响布局流 - 测试真机 Safari：iOS 上某些 flex 行为和 Chrome 不一致，加
min-width: 0到文字容器防溢出
要不要用 bootstrap-icons 替代数字标号
可以，但要小心图标语义和可访问性。用 <i class="bi bi-check-lg"></i> 表示完成很直观，但「第 3 步」这种顺序信息不能只靠图标传达。
使用场景：后台管理系统的内部流程，用户熟悉图标含义；不适合面向老人、视障用户或国际化强的产品。
- 如果用图标，必须配
aria-label="步骤 3：确认订单"，否则屏幕阅读器读不出序号 - 别混用：同一组步骤里不要有的写
3.、有的用bi-three图标，视觉节奏全乱 -
bootstrap-icons的 SVG 是 inline，注意父容器line-height影响垂直对齐，加vertical-align: middle更稳 - 图标加载失败时会留白，至少 fallback 用数字文本兜底（
font-display: swap不解决这个）
真正麻烦的是步骤动态增减——比如根据权限隐藏某步，此时硬编码的数字序号就得重算，CSS 计数器反而更省事，但得确保父容器 counter-reset 位置正确。这点很容易被忽略，一加条件渲染就漏重置。
