修改 $grid-breakpoints 必须在导入 Bootstrap 前完成，且需同步更新 $container-max-widths、$grid-columns 等关联变量，并确保断点名合法、不重复；CSS 容器查询可作局部补充但不替代断点。
修改 $grid-breakpoints Sass 变量必须在导入 Bootstrap 前完成
Bootstrap 5 的断点不是运行时配置，而是编译时决定的——所有媒体查询、栅格类（如 .col-md-6）都依赖 $grid-breakpoints 这个 Sass map。如果你在 @import "bootstrap" 之后才重定义它，等于没改。
- 正确顺序：先
$grid-breakpoints: (...);，再@import "bootstrap/scss/functions";，最后@import "bootstrap/scss/bootstrap"; - 别用 CSS 自定义属性（
--bs-breakpoint-md）试图覆盖断点——这些只是只读的导出值，不参与逻辑生成 - 如果用 Vue/React 的 CSS-in-JS 或纯 CSS 构建流程，Sass 层修改不可用，得换方案（见下一条）
用 bootstrap/scss/mixins 中的 media-breakpoint-up() 等函数时，断点名必须存在于你的 $grid-breakpoints
比如你删掉了 md，但写了 @include media-breakpoint-up(md) { ... }，Sass 编译会直接报错：Invalid null value for $name 或类似提示。
- 新增断点（如
xl2: 1400px）后，记得同步加进$container-max-widths（否则.container-xl2不生效） -
media-breakpoint-down(sm)实际生成的是max-width: 575.98px（即sm下界减 0.02px），所以你的新断点值不能重复或倒置，否则边界行为异常 - 所有断点键名（
xs,sm）最终会变成类名前缀，不要用中划线或大写字母，否则生成的.col-my-custom类无法被 Bootstrap JS 组件识别
不改 Sass 也能局部适配：用 @container + container-type: inline-size 替代部分断点逻辑
CSS 容器查询（@container）在现代浏览器已稳定支持，适合组件级响应式，绕过全局断点限制。比如卡片组件内部布局，不依赖屏幕宽度，而依赖父容器宽度。
- 给包裹元素加
style="container-type: inline-size;"或 CSS 类.card-container { container-type: inline-size; } - 然后写
@container (min-width: 400px) { .card-content { flex-direction: column; } } - 注意：Bootstrap 5 本身不基于容器查询，所以
.row/.col类仍走传统断点；这是补充手段，不是替代方案 - 旧浏览器（如 IE、老版 Safari）不支持，需按需加回退（例如用
@media (min-width: 400px)）
自定义断点后，务必检查 $container-max-widths 和 $grid-columns 是否配套
只改 $grid-breakpoints，但忘了调 $container-max-widths，会导致 .container-md 宽度卡在默认值（540px），和你的新 md 断点（比如 760px）完全脱节。
-
$container-max-widths必须包含和$grid-breakpoints相同的键名，且值合理（通常略小于下一个断点） - 如果调整了
$grid-columns（比如从 12 改成 24），所有.col-*类的计算逻辑会变，但.col-md-6仍占一半——只是“一半”现在是 12/24 而非 6/12，这点容易误判布局效果 - 第三方 Bootstrap 扩展库（如 AdminLTE）可能硬编码断点名，自定义后它们的样式可能断裂，要手动 patch 或禁用相关模块
$container-max-widths 同步，以及忘记新断点名要贯穿到 mixins、utilities、甚至 JS 插件的条件判断里。 
