在 Bootstrap 5 Sass 中新增自定义断点需在导入任何 Bootstrap 文件前重定义 $grid-breakpoints 映射表，并同步更新 $container-max-widths，确保键名合法、值带单位，否则栅格类、媒体查询及容器宽度均无法生效。
如何在 Bootstrap 5 的 Sass 中新增自定义断点
Bootstrap 5 默认只提供 xs、sm、md、lg、xl、xxl 六个断点，想加 2xl 或 mobile-lg 这类尺寸，不能靠覆盖 CSS 类，必须从 Sass 变量源头介入。
关键路径是修改 $grid-breakpoints 映射表——它控制所有断点数值、媒体查询生成、栅格列计算和工具类前缀（如 col-xxl-6）的生成逻辑。
- 必须在导入 Bootstrap 核心文件 之前 重定义
$grid-breakpoints，否则后续依赖它的变量（如$container-max-widths）不会同步更新 - 新增断点名必须是合法 CSS 类名（仅字母、数字、连字符），且不能与已有键重复
- 值必须是带单位的 Sass 长度（如
1400px），不能写1400或"1400px"
修改 $grid-breakpoints 后，哪些东西会自动生效
Bootstrap 的断点系统是“一改全链响应”的：只要 $grid-breakpoints 正确更新，以下内容都会自动重建：
- 所有响应式栅格类（
col-md-6、d-lg-none、text-xl-center等）会为新断点生成对应版本 -
breakpoint-up()、breakpoint-down()、breakpoint-between()等混合宏支持新断点名作为参数 -
$container-max-widths若未手动重写，会按比例推导出新断点下的容器最大宽度（基于$grid-breakpoints值 × 0.95） - 所有依赖
map-keys($grid-breakpoints)的循环（如工具类生成）会包含你的新断点
示例：在自定义 Sass 入口文件顶部加入
立即学习“前端免费学习笔记（深入）”；
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px, "2xl": 1600px ); @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot"; // …其余导入
为什么新增断点后 container 在新尺寸下没撑满
因为 $container-max-widths 默认只映射到 $grid-breakpoints 的键，但它的值是静态定义的。如果你加了 "2xl" 断点，但没同步扩展 $container-max-widths，那么 container 类在 1600px 宽度下仍沿用 xxl 的宽度（1320px），造成左右留白。
- 必须显式重定义
$container-max-widths，且键必须与$grid-breakpoints完全一致 - 值建议略小于断点值（如
"2xl": 1560px），避免内容贴边 - 如果跳过这步，
container-fluid不受影响，但带断点后缀的container-xxl类也不会为新断点生成
接上例，在 $grid-breakpoints 后追加：
$container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px, "2xl": 1560px );
新增断点不生效的三个高频原因
编译通过但新类没生成？大概率卡在这三处：
- 重定义
$grid-breakpoints放在了@import "bootstrap/scss/variables"之后，导致 Bootstrap 内部已用默认值初始化了其他变量 - 断点名用了非法字符，比如
2xl（开头数字）、2xl-（结尾连字符）、extra-large（含下划线），Sass map 键解析失败 - 使用了
!default覆盖（如$grid-breakpoints: (...) !default），而原变量本身已带!default，覆盖无效
真正起效的写法只有：在所有 @import 之前，无修饰地赋值 $grid-breakpoints 和 $container-max-widths。
