必须在@import "bootstrap/scss/variables"前声明$grid-columns: 24;，否则因!default机制失效；gutter需全局改$grid-gutter-width并重新编译，且.row与.col的负边距/正padding配对不可破坏。
改 $grid-columns 必须在 @import "bootstrap/scss/variables" 之前声明
直接在自定义 Sass 文件末尾写 $grid-columns: 24; 不会生成 .col-13 到 .col-24 —— 变量早已被 variables.scss 读取并锁定。Bootstrap 5 的 $grid-columns 带 !default，只认第一次赋值。
正确顺序必须是：
$grid-columns: 24; @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/grid";
- 不能写成
$grid-columns: 24 !default;，这会让声明被跳过 - 别改
node_modules里的文件，改你自己的入口 Sass（如custom.scss） - 改完后检查编译输出 CSS 里有没有
.col-24，没有说明变量没进grid.scss的循环 -
order-类不会自动扩展：默认只到order-12，要支持order-24得手动覆盖$orders变量
间隙（gutter）不能靠 padding 或 margin 硬调
给 .col 加 px-3，或给 .row 加 mx-4，一定会错位。Bootstrap 5 的栅格对齐依赖负边距抵消机制：.row 有负 margin，.col 有正 padding，二者严格配对。
-
gx-3、gy-2这些类必须写在<div class="row gx-3">上，写在.col里完全无效 - 响应式写法要显式兜底，比如
gx-0 gx-md-3 gx-lg-4；漏掉gx-0，xs 下仍用默认gx-2（0.5rem） - 运行时动态改间隙，唯一可靠方式是设置
--bs-gutter-x变量：<div class="row" style="--bs-gutter-x: 1.25rem;"> - 别设
--bs-gutter-x: 0或负值，某些工具类（如row-cols-2）内部逻辑可能异常
row-cols-10 不等于 10 列等宽布局
row-cols-10 只控制「每行最多显示几个 .col 子项」，它不改变列宽计算基准，底层仍按 12 列系统分配空间。
立即学习“前端免费学习笔记（深入）”；
- 混用
.col-6和.col会导致宽度冲突：前者按 12 列算 50%，后者是flex: 1自适应 - 小屏下内容稍多就折行，无法保证 10 列始终单行排列
-
.offset-*依然绑定在 12 列体系上，.offset-3是偏移 25%，不是 30% - 真要 10 列等宽，更稳的方案是加自定义类：
.col-1-10 { width: 10%; }，再配合媒体查询补断点
全局改间隙只能动 $grid-gutter-width 并重新编译
如果项目里几十个 .row 都要统一用 12px 间距，一个个加 gx-2 不现实，这时必须回到构建层。
- 在自定义 Sass 中，把
$grid-gutter-width: 0.75rem;（即 12px）写在所有@import之前 - 支持响应式细分：
$grid-gutter-width-md: 1rem;、$grid-gutter-width-lg: 1.5rem; - 改完必须重新编译整个 Bootstrap，否则 CSS 里还是旧值
- 注意：
gutter控制的是「列之间」的空隙，不是「内容与列边缘」的距离；文字贴边该调.col内部的px-3，不是碰gx-
