Bootstrap 5移除了.form-group等语义容器类，改用间距类或自定义类替代；验证逻辑转向伪类驱动，需确保novalidate属性和原生校验配合；.row默认为flex布局导致居中等旧样式失效；需排查CDN或构建产物中v4与v5 CSS混用问题。
Bootstrap 5移除了.form-group等语义容器类
Bootstrap 4 的 .form-group 是一个有明确样式（如 margin-bottom）的语义包装类，很多 jQuery 插件或旧 CSS 会依赖它做 DOM 定位或样式注入。Bootstrap 5 彻底删掉了这个类——它不再定义任何样式，也不出现在源码中。
如果你的项目里还有类似这样的代码：$('#myForm').find('input').closest('div').addClass('form-group');
那它在 v5 中只会给 div 加一个浏览器完全忽略的 class，后续基于 .form-group .invalid-feedback 的查找就会失败，验证提示不显示。
- 检查所有动态添加 class 的 jQuery 逻辑，把
.form-group替换为间距类（如mb-3）或语义无关的自定义类（如js-form-field） - 不要用
.form-group做 CSS 选择器起点，改用结构定位（如.form-floating > .form-control）或新增 wrapper class - Django/Templating 场景下，确认模板里没硬编码
<div class="form-group">—— 即使保留，也需手动补上mb-3等间距
类名语义和默认行为被重构，伪类触发逻辑变了
Bootstrap 5 把很多视觉反馈从“JS 控制 class”转向“原生表单伪类驱动”，比如 :invalid、:valid、:focus-visible。这意味着：如果 JS 没初始化（比如因 jQuery 冲突导致 bootstrap.js 跳过加载），.form-control:invalid 根本不会生效，.invalid-feedback 也不会显示——不是 CSS 写错了，是浏览器压根没触发这个伪类。
-
form-control在 v5 中默认不设border-color，而是靠:focus和:invalid动态加边框色；v4 是直接设了border-color: #ced4da - 如果你用 JS 手动 toggle
.is-invalid，得同步操作setCustomValidity('')或调用reportValidity()，否则伪类不响应 - 检查是否误删了
novalidate属性：v5 示例强调加novalidate让 JS 控制校验，否则浏览器原生校验会干扰反馈时机
Flexbox 默认值变更让栅格和排列类行为不一致
Bootstrap 5 的 .row 默认 display: flex 且 flex-wrap: wrap，而 v4 的 .row 是 display: block + margin-left/right: -15px。这导致两个常见失效点：
立即学习“前端免费学习笔记（深入）”；
- 老代码里给
.row设text-align: center想居中子项，在 v5 中完全无效（flex 容器不响应 text-align）——得改用justify-content-center - 某些插件（如 masonry 类布局）依赖 v4 的 block 流式布局，直接套用到 v5 的 flex
.row上会错位或高度塌陷 -
.col在 v5 中默认flex: 1 0 0%，意味着内容撑不开时会收缩；v4 是固定宽度百分比，更“刚性”——如果旧 CSS 用min-width强控列宽，可能被新 flex 行为覆盖
CDN 或构建产物里混入 v4 的 CSS 文件
最隐蔽的问题：你以为只引了 v5，但实际页面里同时存在 bootstrap.min.css（v5）和 bootstrap-grid.min.css（v4），或者某个第三方组件悄悄打了 v4 的 CSS 包。结果是 .col-md-6 在 v5 中是 flex 子项，在 v4 中是 float 元素，两者规则共存，浏览器按加载顺序和权重选一个，行为随机。
- 打开开发者工具 Elements 面板，右键任意
.col元素 → “Force element state” → 看:hover或:focus时哪个版本的样式在生效 - Network 面板搜
bootstrap.*css，确认只有一份 v5 的 CSS 加载（注意区分bootstrap.min.css和bootstrap-grid.min.css） - Vite/Webpack 用户检查
node_modules是否有残留的bootstrap@4依赖（npm ls bootstrap），尤其警惕bootstrap-icons或bootstrap-vue这类配套包的隐式依赖
mb-3 在 v4 是 margin-bottom: 1rem，在 v5 里还多了一层 CSS 变量 fallback 机制，而你的自定义样式如果用了 !important 锁死旧值，反而会卡住变量更新。 
