Bootstrap 5无内置多步骤表单组件，须手动组合基础类、CSS与JS实现；需用JS管理步骤索引、控制显隐、解耦校验，并注意form-floating结构、w-100宽度、novalidate及状态同步。
Bootstrap 5 多步骤表单必须手动实现，没有内置 step 或 wizard 组件
Bootstrap 5 官方不提供多步骤表单（wizard）或步骤条（progress stepper）的原生组件。所有“步骤条”效果都得靠组合基础类 + 自定义 CSS + JS 控制显隐来完成。别指望加个 class 就自动分步——这是最常被误读的一点。
常见错误现象：form 里直接套多个 fieldset 却没写 JS 切换逻辑，结果所有步骤同时显示；或用了第三方插件但和 Bootstrap 5 的 form-floating 冲突，导致标签不上浮、聚焦失效。
- 必须用 JS 管理当前步骤索引（
currentStep = 0），并切换各步骤容器的active/show类 - 每个步骤建议用
div.step包裹，配合position: absolute或display: none/block控制可见性，避免布局重排抖动 - 若用
form-floating，确保每个步骤内结构合规：div.form-floating > input + label[for="xxx"]，且input的id在整个表单中唯一（不能多个步骤都用id="email"） - 禁用浏览器默认表单验证（
novalidate）——否则用户点“下一步”时，未填字段会触发原生提示，打断流程
form-control 宽度问题在多步骤中会放大，w-100 不是可选项而是必选项
从 Bootstrap 4 升到 5 后，form-control 默认不再设 width: 100%，只保留 display: block。在单步表单里可能只表现为输入框变窄；但在多步骤中，当某一步骤被 display: none 切换回来时，父容器宽度可能已重算，导致控件突然收缩、错位甚至溢出。
- 每个
input、select、textarea都要显式加class="form-control w-100" - 如果用
form-floating，它内部已设width: 100%，此时可不加w-100，但前提是结构严格符合文档：label 必须紧跟 input 之后，且不能有其他元素插入 - 避免用
col直接包input——col是栅格单位，不是表单容器；正确做法是div.col-12 > div.form-floating > input + label
步骤条 UI 常见三种实现方式，.progress 最易踩坑
很多人第一反应是用 Bootstrap 5 的 .progress 类做步骤条，但它本质是线性进度指示器，不支持点击跳转、不支持中间状态标记（如“已完成”“当前”“未开始”），也不适配小屏断点。真要用，得自己补一堆 CSS 和 JS。
-
纯 CSS 步骤条：用
ul.stepper > li+ 伪元素::before画圆点 + 连线，靠data-step="2"控制激活态，轻量、可控、无依赖 -
Tab 导航模拟：用
nav.nav-tabs+tab-content结构，复用 Bootstrap 的 tab 切换 JS，但需覆盖默认样式（去掉下划线、改圆角、调间距） -
自定义
progress改造：给div.progress加position: relative，再用绝对定位的span.badge覆盖每个步骤点——但移动端 touch 区域小，容易点不准
校验逻辑必须按步骤解耦，不能全局 checkValidity()
用户填完第一步点“下一步”，你不能对整个 form 调用 checkValidity()，否则会触发所有步骤里未渲染的字段校验，造成混乱提示甚至焦点跳转到不可见区域。
- 每步只校验当前
step内的input：遍历currentStepEl.querySelectorAll('input[required]')，逐个调checkValidity() - 手动添加
is-invalid和invalid-feedback，别依赖:valid/:invalid伪类——它们在display: none下仍生效，会导致隐藏字段也显示红框 - 提交前才对全部步骤做最终校验，此时可遍历所有
step元素，统一收集错误 - 记住：
setCustomValidity('')要在用户修改后清空，否则上一步的错误会残留到下一步
真正麻烦的不是怎么画圆点或切步骤，而是状态同步：JS 步骤索引、DOM 显隐、表单校验、URL hash、浏览器前进后退——任一环节脱节，用户就卡在“下一步”点不动或者回退后数据消失。先理清这四者的绑定关系，再动手写代码。
