<p>Bootstrap 5 中 .g-3 不生效是因间距拆分为 gx/gy，且 flex 布局易受 overflow、position 或图片宽高影响；.row-cols-* 需显式断点链；.container-fluid 新增 padding；JS 数据属性须加 bs 命名空间。</p>
为什么 .g-3 突然不生效了
不是类名被删了，而是 Bootstrap 5 把间距（gutter）拆成了垂直和水平两个独立维度。v4 的 .g-3 同时作用于行列间隙，v5 中它依然存在，但默认只影响“两者”，而很多旧项目实际只依赖水平间隙——一旦外层容器或父级有 overflow: hidden、position: absolute 子元素，或者图片没设 max-width: 100%，就会让 .row 的 flex 拉伸失效，导致列宽计算异常，看起来像“.g-3 没起作用”。
常见错误现象：.row.g-3 下的 .col 左右贴边、列宽忽大忽小、小屏下间隙消失、嵌套 .row 间距加倍。
- 检查是否漏写了
.row：所有.col-*必须直接放在.row内，不能直接塞进.container - 确认没有自定义 CSS 覆盖
.row的display: flex或重置了margin - 若只需水平间隙，改用
.gx-3；只需垂直间隙，用.gy-2；两者都要才用.g-3 - 想彻底关闭间隙？
.g-0是唯一有效写法，.no-gutters已废弃
.row-cols-2 在手机上变成单列了怎么办
v5 的 .row-cols-* 类现在严格按断点生效，不再向下兼容。比如 .row-cols-sm-2 只在 sm 及以上生效，xs 下会退化为单列——而你原来在 v4 用的 .row-cols-2 是全局生效的，所以升级后小屏突然“塌”了。
使用场景：卡片列表、表单字段组、响应式网格布局。
- 必须显式补全断点链：
.row-cols-1 .row-cols-sm-2 .row-cols-md-3 - 别省略
.row-cols-1：否则xs下.col会按内容宽度撑开，不是预期的满宽 - 如果用 Sass 自定义，注意
$grid-row-columns变量已重构，旧覆盖方式可能无效 - 验证方法：在 Chrome DevTools 的 Device Toolbar 里切到 “iPhone SE” 尺寸，看是否仍双列
为什么 .container-fluid 左右多出空白
v5 统一给所有容器（包括 .container-fluid）加了 padding-left/right: var(--bs-gutter-x, 1.5rem)，这是栅格系统把 gutter 抽成 CSS 变量的结果。v4 的 .container-fluid 是纯 width: 100%，没 padding，所以升级后页面左右突然“缩进”了。
性能影响：这个改动本身无性能损耗，但若你在根节点大量重设 --bs-gutter-x，又没同步更新 $spacers Sass 变量，会导致工具类如 .gx-3 计算错乱。
- 最快修复：给
.container-fluid加px-0，即<div class="container-fluid px-0"> - 全局还原：在
:root里重设--bs-gutter-x: 0，但会影响所有gx-类 - 别用
!important覆盖padding：会破坏其他组件对--bs-gutter-x的响应式逻辑 - 注意：如果你还用了
.container，它的max-width断点也变了，需核对$container-max-widths
JavaScript 组件点击没反应，但 HTML 没变
最常被忽略的点：Bootstrap 5 所有 JS 组件的数据属性加了 bs 命名空间。data-toggle="collapse" 和 data-target="#nav" 在 v5 中完全失效，浏览器不会报错，只是静默忽略。
容易踩的坑：模态框、下拉菜单、折叠面板、工具提示全部中招；Vue/React 封装的组件若硬编码了这些属性，也会失效。
- 必须批量替换：
data-toggle→data-bs-toggle，data-target→data-bs-target -
data-dismiss同样变为data-bs-dismiss（如data-bs-dismiss="modal"） - JS 初始化代码不用改，
new bootstrap.Collapse()仍有效，但前提是 DOM 属性已更新 - 检查第三方插件：某些基于 Bootstrap 的 UI 库（如 AdminLTE）可能尚未适配 v5 的 data 属性
真正麻烦的不是类名改了，而是那些没报错、却悄悄改变行为的地方：比如 .col 的 flex: 1 1 0 在长文本下溢出，或者 .form-control 字号从 14px 变 15px 导致行高错位——这些细节得靠视觉回归测试才能捕获，光扫代码没用。
