Bootstrap 5表单主题失效因DOM契约、伪类逻辑和CSS变量体系重构：.form-group被移除，验证提示须紧邻input同级，:invalid等伪类需novalidate配合reportValidity()触发，主题色应改--bs-primary等CSS变量而非仅覆盖Sass变量。
自定义表单主题在 Bootstrap 4 升级到 v5 后大面积失效，不是你样式写错了，而是 v5 彻底重构了表单的 DOM 契约、伪类触发逻辑和 CSS 变量体系——直接沿用旧 CSS 文件，等于拿钥匙开锁孔已被焊死的门。
检查 .form-group 是否还在 DOM 里被依赖
v5 已删除 .form-group 类，它不再声明任何样式，也不参与 JS 验证定位。如果你的自定义 CSS 写了 .form-group .form-control 或 JS 里用 $('input').closest('.form-group')，这些选择器会匹配失败，导致整个表单样式链断裂。
- 打开 DevTools → Elements 面板，搜索页面中是否还存在
class="form-group"；如果存在，它只是个空壳，不提供 margin、padding 或结构语义 - 把所有
.form-group替换为间距类（如mb-3）或语义中立 wrapper（如js-form-field） - 验证提示（
.invalid-feedback）必须紧跟<input>同级，且不能被任何中间 wrapper 隔开，否则 Bootstrap 的 JS 不会把它关联到控件上
确认 :invalid/:valid 伪类是否真正触发
v5 表单状态样式（如 .form-control:invalid 边框变红）依赖原生表单伪类，而非 JS 动态加 .is-invalid。如果校验没生效，你的自定义颜色规则根本不会进入层叠流程。
- 确保
<form>上有novalidate属性：没有它，浏览器原生校验会抢先拦截并覆盖 JS 行为 - 调用
input.reportValidity()或设置input.setCustomValidity('')才能触发:invalid，仅靠 JS 切换 class 不起作用 - 你的自定义 CSS 若写的是
.is-invalid .form-control，需同步改为.form-control:invalid，否则权重再高也赢不了伪类
重写变量覆盖路径，别再只改 $primary
v5 把颜色、边框、圆角等大量样式抽成 CSS 自定义属性（如 --bs-form-control-border-color），而旧项目常只覆盖 Sass 变量 $primary，结果按钮变色了，输入框边框还是默认灰。
立即学习“前端免费学习笔记（深入）”；
- 全局主题色优先改
:root里的--bs-primary，而不是硬写.btn-primary { background-color: #xxx } - 表单控件相关变量必须整体覆盖：
--bs-form-control-bg、--bs-form-control-border-color、--bs-form-control-focus-border-color等缺一不可 - 如果用 Sass 编译，确认
variables.scss是通过additionalData注入（Vite/Webpack），且在bootstrap.scss所有@import之前执行
排查 .container-fluid 和 .row 的 padding/flex 干扰
v5 给 .container-fluid 默认加了 padding-left/right: var(--bs-gutter-x)，给 .row 设了 display: flex，这两项改动会让旧表单布局“撑开”或“塌陷”，导致你写的 max-width、text-align: center 全部失效。
-
.container-fluid外层加px-0快速清掉左右 padding，不要全局重设--bs-gutter-x，否则.gx-3类会错乱 -
.row不再响应text-align，居中子项得用justify-content-center，不是text-center - 嵌套
.row时，.g-3会叠加垂直+水平间隙，小屏列宽计算异常——按需换用.gx-3或.gy-2
最易被忽略的是：v5 的表单样式已从“类驱动”转向“伪类 + CSS 变量 + 结构契约”三位一体，单独修补某一层（比如只改 CSS 类或只调变量），大概率漏掉另外两环。调试时盯紧 DevTools 的 Computed 面板，看目标属性最终由哪条规则决定，而不是只看 Styles 面板里有没有你写的那行。
