Bootstrap 5移除.form-group等语义类、收紧.row-cols-2断点至md起效、改用CSS变量控制gutter，导致旧结构因契约破坏而“失效”：.invalid-feedback须紧邻input同级，.row-cols-2需补全.row-cols-1等断点链，.container-fluid默认带padding需px-0重置。
为什么 .form-group 加了 mb-3 还是不显示验证提示
.form-group 在 v5 中被彻底删除，它从来就不是个纯间距类。它的存在是为了保证 .invalid-feedback 和 <input> 同级且紧邻，让 JS 能正确定位反馈元素。只加 mb-3 会破坏这个 DOM 契约。
-
.invalid-feedback必须紧跟在<input class="form-control">后面，不能嵌套在其他 div 里 - 旧 jQuery 代码如
$('input').closest('.form-group')必须重写为$('input').parent()或加自定义 wrapper 类（如js-form-field） - 表单需带
novalidate属性，否则浏览器原生校验会干扰:invalid伪类触发
为什么 .row-cols-2 在手机上变成单列了
v5 的 .row-cols-2 等价于 .row-cols-md-2，只在 md（≥768px）及以上生效。xs/sm 下默认退化为单列——这不是 bug，是行为收紧。
- 必须显式补全断点链：
.row-cols-1 .row-cols-sm-2 .row-cols-md-3 - 漏掉
.row-cols-1会导致 xs 下.col按内容宽度撑开，而非 100% 宽 - 嵌套
.row时，.g-3和.gy-2是叠加关系，不是覆盖，可能产生 5rem 间隙
为什么 .container-fluid 左右突然多出空白
v5 给 .container-fluid 默认加了 padding-left/right: var(--bs-gutter-x)，这是栅格系统把 gutter 抽成 CSS 变量的结果。v4 是纯 width: 100%，无 padding。
- 最快修复：加
px-0，即<div class="container-fluid px-0"> - 全局还原需在
:root重设--bs-gutter-x: 0，但会影响所有.gx-*类 - 若你自定义了 Sass 变量
$spacers，必须同步更新整个 map，不能只改$spacer单值
为什么 .g-3 看起来“没起作用”
.g-3 没被删，但它在 v5 中默认同时作用于水平和垂直间隙。很多旧项目其实只依赖水平间隙，而父容器的 overflow: hidden、图片未设 max-width: 100% 或浮动残留，会让 .row 的 flex 行为异常，导致列宽计算错乱。
立即学习“前端免费学习笔记（深入）”；
- 确认所有
.col-*都直接放在.row内，不能塞进.container就完事 - 若只需水平间隙，用
.gx-3；只需垂直，用.gy-2；两者都要才用.g-3 -
.g-0是唯一有效关闭间隙的方式，.no-gutters已废弃
.container-fluid 的 padding，却没同步调整 --bs-gutter-x，那 .gx-3 就会按新变量值缩放，而你的自定义间距类可能还按旧逻辑算——表面修好了，实则埋了更难排查的缩放错位。 
