Bootstrap 5 自定义断点唯一可靠方式是重定义 Sass 变量 $grid-breakpoints 并重新编译，必须同步更新 $container-max-widths 等关联变量，且所有变量须在 @import "bootstrap/scss/variables" 前定义，否则类不生成或布局错位。
直接修改 $grid-breakpoints 变量即可扩展
Bootstrap 5 的断点不是写死的，而是通过 Sass 变量 $grid-breakpoints 控制的。你不需要覆盖媒体查询规则，只需在导入 Bootstrap 前重定义这个 map 变量。
常见错误是试图用 @media (min-width: ...) 手动追加断点——这会导致响应式类（如 .d-xl-block、.col-xxl-6）缺失，因为这些类名由 Bootstrap 的循环生成逻辑决定，不随你手写的媒体查询自动出现。
正确做法：
- 确保你使用的是 Bootstrap 源码（
bootstrap/scss/），而非已编译的bootstrap.min.css - 在
@import "bootstrap/scss/functions";之后、@import "bootstrap/scss/grid";之前，重定义$grid-breakpoints - 必须同时扩展
$container-max-widths（否则容器宽度不匹配）和$grid-columns（如需新增xxl列栅格类）
示例（新增 xxl: 1400px 断点）：
立即学习“前端免费学习笔记（深入）”；
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ); $container-max-widths: ( xs: 100%, sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px ); @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot"; // ... 其余导入
xxl 断点生效后，哪些类会自动生成？
Bootstrap 的 grid 和 utilities 模块会基于 $grid-breakpoints 自动输出完整响应式类，包括：
- 栅格类：
.col-xxl-1到.col-xxl-12、.col-xxl-auto、.row-cols-xxl-* - 显示工具类：
.d-xxl-none、.d-xxl-inline、.d-xxl-block等 - 间距类：
.p-xxl-0到.p-xxl-5、.m-xxl-auto - 文本对齐：
.text-xxl-left、.text-xxl-center等
注意：.d-xxl-flex 这类 Flex 工具类需要确保你已导入 utilities/api（Bootstrap 5.3+ 默认启用），否则只生成基础显示类。
为什么改了变量但 .col-xxl-6 仍不生效？
最常被忽略的两个环节：
- 没导入
bootstrap/scss/grid—— 栅格类全部定义在此文件中；仅导入reboot或utilities不够 - 变量重定义位置错误：必须在
@import "bootstrap/scss/functions"之后、@import "bootstrap/scss/variables"之前，否则会被 Bootstrap 内置默认值覆盖 - Sass 编译缓存未清：尤其是使用 Vite / Webpack 的 dev server，改完变量后需重启或强制刷新缓存
验证方式：检查编译后的 CSS 是否包含 @media (min-width: 1400px) 及其内部的 .col-xxl-6 规则。没有，就是变量未生效或 grid 模块未加载。
纯 CSS（无 Sass）环境下无法扩展断点
如果你只引入了 bootstrap.min.css，那 $grid-breakpoints 是编译时固定的，运行时不可修改。此时所谓“纯 CSS 扩展”本质上是徒劳的——你最多能手动写媒体查询覆盖部分样式，但所有预设响应式类名（.d-xl-block 等）都不存在，也无法生成新类名。
真正可行的替代路径只有两条：
- 退回到 Sass 构建流程，按前述方式定制编译
- 用 JavaScript 动态添加 class（例如监听
window.matchMedia），但这脱离了 Bootstrap 设计范式，维护成本高
别在 bootstrap.min.css 上做断点梦，它是一锤定音的产物，不是活的配置。
