bootstrap 5 断点定制唯一可靠方式是修改 sass 变量 $grid-breakpoints 并重新编译，需按顺序导入 functions、variables、重定义变量、bootstrap；删减断点会使对应类不生成，新增断点需同步更新 container 宽度、工具类前缀及 js 组件逻辑。
Bootstrap 5 允许你完全自定义断点，但不是靠写 CSS 媒体查询硬改，而是通过修改 Sass 变量重新编译——直接在 HTML 里加类或用 JS 动态操作，起不到断点定制效果。
如何在 Sass 中覆盖 $grid-breakpoints
这是最标准、唯一可靠的定制方式。Bootstrap 5 的所有响应式栅格类（如 col-md-6、px-lg-4）都依赖这个 map 变量生成。你不能只改一个值，必须提供完整结构：
- 先
@import "bootstrap/scss/functions";和@import "bootstrap/scss/variables"; - 再重定义
$grid-breakpoints，例如去掉xs、新增2xl：$grid-breakpoints: ( sm: 576px, md: 768px, lg: 992px, xl: 1200px, "2xl": 1440px );
- 最后
@import "bootstrap/scss/bootstrap";（顺序不能错，否则变量未生效）
注意：删掉某个断点（比如不用 xs），对应的所有 col-xs-* 类都不会被编译出来——不是隐藏，是根本不存在。
为什么不能用 CSS 覆盖媒体查询断点
有人试图在自己的 CSS 里写 @media (min-width: 600px) { ... } 并期望它影响 col-md-6 行为，这行不通。因为：
-
col-md-6对应的是 Bootstrap 编译时生成的固定规则，如@media (min-width: 768px) { .col-md-6 { flex: 0 0 auto; width: 50%; } } - 你的自定义媒体查询不会自动绑定到 Bootstrap 的类名逻辑上
- 强行覆盖需重复写整套栅格样式，等于放弃框架，维护成本飙升
自定义断点带来的实际影响
改了断点，不只是“多一个尺寸”，会连锁影响多个系统：
-
container宽度：每个断点对应$container-max-widths，必须同步更新，否则.container在新断点下不撑满 - 工具类前缀：新增
"2xl"后，text-2xl-center、d-2xl-none等才会生成（前提是 Bootstrap 版本 ≥ 5.2；5.1.x 不支持非标准键名） - JavaScript 组件行为：如
Offcanvas的触发断点、Navbar折叠阈值，也读取$grid-breakpoints，改了就得测交互是否意外触发
如果你只用 CDN 引入官方 CSS，就完全无法定制断点——那文件是预编译好的，变量早已固化。
要不要定制？先看这几个信号
定制断点不是“更高级”的标志，多数项目不需要：
- 产品真实流量中，
1440px+设备占比长期低于 5%，却为此增加构建步骤和测试负担，得不偿失 - 设计稿只给
md/lg两套布局，硬加xl和2xl只会让开发分心写无用类 - 团队没有 Sass 构建流程，或 CI/CD 不支持自定义编译，那改了变量也上不了线
真正值得定制的场景很窄：企业级后台系统有明确多屏终端规范（如必须适配 2K 屏远程桌面 + iPad Pro + 折叠屏手机），且已建立稳定的 Sass 编译链路。
