SCSS变量必须在@import Bootstrap前重定义，否则无效；新增断点需同步更新$grid-breakpoints与$container-max-widths，并配对调用make-col-ready()和make-col()；JS应读取CSS变量而非硬编码像素值判断断点。
SCSS变量必须在导入Bootstrap前重定义
直接改 $grid-breakpoints 但放在 @import 后面，等于没改——Bootstrap 的类名（如 col-md-6）是在编译时静态生成的，变量读取发生在 import 阶段。你后改，它已经编译完了。
常见错误是把变量覆盖写在自定义样式文件末尾，或者混在组件 SCSS 里。结果是 HTML 中写了 col-xl-4，但 CSS 文件里根本没生成这个类。
- 必须新建一个入口 SCSS 文件（如
theme.scss），第一件事就是重定义$grid-breakpoints和配套的$container-max-widths - 断点键名要完整保留（
xs,sm,md…），漏掉某个键会导致对应类名缺失，比如删了lg，col-lg-8就不会生成 - 如果加了新断点（如
xxl），$container-max-widths也得同步加，否则container-xxl不生效
新增断点类名需配对调用 make-col-ready 和 make-col
光写 @include media-breakpoint-up(xxl) { .col-xxl-3 { flex: 0 0 25%; } } 不行。Bootstrap 的列行为依赖两个 mixin 协同：前者设 padding 和 box-sizing，后者设 flex 和 width。顺序错或漏一个，就会出现内边距错位、宽度不生效、元素“贴边”等现象。
典型翻车现场：小屏下正常，大屏一缩放，卡片突然右移 15px——其实是 make-col-ready 没调用，col 默认的 padding-left/right: 15px 没被重置。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
@include media-breakpoint-up(xxl) { .col-xxl-3 { @include make-col-ready(); @include make-col(3); } } -
make-col-ready()必须在make-col()前调用，反了会覆盖 padding - 如果用了
container-fluid，还要确认新断点是否被其max-width截断——container-fluid不响应断点，但父级container-xxl会
JS 动态检测断点必须读 CSS 自定义属性，不能硬编码像素值
window.matchMedia("(min-width: 768px)").matches 看似能判断 md 断点，实则脆弱：页面加载初期 CSS 未就绪、用户缩放、或你已自定义了 md 为 820px，JS 还按 768px 判断，结果永远不准。
更麻烦的是，matchMedia 的 matches 初始值可能为 false，哪怕视口宽度早已超过断点——它只反映媒体查询注册时的状态，不主动监听变化。
- 推荐做法：在 SCSS 中导出断点为 CSS 变量，例如：
:root { --breakpoint-md: #{map-get($grid-breakpoints, md)}; } - JS 里统一读：
getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-md')，再转成数字参与逻辑 - 避免在多个地方维护同一套断点数值，SCSS 变量是唯一信源
Gridish 或 Flexible Grid System 的断点配置本质不同
别混淆 Bootstrap 的 SCSS 变量体系和 CSS Gridish 这类工具的 JSON 配置。Gridish 的 css-gridish.json 里 "breakpoint": 120 单位是 rem，不是 px；它生成的是纯 CSS Grid/Flex 回退代码，不依赖 Bootstrap 类名，也不走 make-col 流程。
Flexible Grid System Scss Plus（FGSP）则靠 $flexiblegs-method 和断点映射表驱动，它的 col- 类是运行时生成的，和 Bootstrap 的编译时生成逻辑完全不同。
- 选型前先确认：你要的是类名兼容 Bootstrap（走 SCSS 变量重定义），还是彻底换一套网格生成机制（用 Gridish/FGSP）
- 混用风险高：比如在 Bootstrap 项目里引入 Gridish 的 CSS，两者容器宽度策略、gutter 计算方式、断点触发时机都可能冲突
- 真正容易被忽略的是单位一致性——Bootstrap 用 px，Gridish 用 rem，FGSP 默认 rem 但可配，跨工具迁移时像素值会漂移
