必须重定义 $grid-breakpoints 并重编译 Sass 才能启用 col-2xl-6 类名，因 Bootstrap 响应式类在构建阶段静态生成；仅写 @media 无效，且需同步更新 $container-max-widths 并用 Dart Sass 重新编译。
直接写 @media 无法生成新类名（如 col-2xl-6）
你写的 @media (min-width: 1440px) 不会自动让 col-2xl-6 生效——因为 Bootstrap 的所有响应式类（栅格、显示、间距等）都是 Sass 在构建阶段静态生成的，依赖 $grid-breakpoints 这个变量。没在变量里声明 "2xl"，Sass 就不会循环输出任何带 2xl 前缀的 CSS 规则。
常见错误现象：
- HTML 写了
<div class="col-2xl-6">，但宽度始终是默认值（比如 100%），毫无响应效果 - 开发者以为只是 CSS 加载顺序问题，反复调换
<link>顺序或加!important，结果依然无效 - 用浏览器 DevTools 检查，发现根本没有匹配
.col-2xl-6的 CSS 规则——它压根没被生成
必须重定义 $grid-breakpoints 并重编译 Sass
想真正新增断点（比如 "2xl": 1440px），三步缺一不可：
- 在导入 Bootstrap 的
functions后、variables前，覆盖$grid-breakpoints，且必须包含全部键（xs,sm,md,lg,xl,xxl,"2xl"），顺序严格递增 - 同步重定义
$container-max-widths，否则.container在 1440px 下仍按xxl的 1320px 渲染，左右留白异常 - 用 Dart Sass（不是已停更的 Node Sass）通过构建工具（Vite/Webpack/CLI）重新编译整个 SCSS 入口文件
示例（放在自定义 SCSS 文件最顶部）：
立即学习“前端免费学习笔记（深入）”；
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px, "2xl": 1440px ); $container-max-widths: ( xs: 100%, sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px, "2xl": 1380px );
纯 CSS 场景下只能手动模拟，无法获得完整配套能力
如果项目用 CDN 引入、无构建权限，或只需局部适配，可绕过类名生成，自己写媒体查询规则：
- 断点数值必须与 Bootstrap 源码一致（例如
lg是992px，不是1024px），否则显隐错位、栅格对不齐 - 只能覆盖基础样式（如
width,display,padding），无法获得offset-2xl-2、px-2xl-4等衍生工具类 - 每次 Bootstrap 升级都要手动核对断点值是否变动，否则旧规则失效
示例（仅适用简单场景）：
@media (min-width: 1440px) {
.my-col-2xl-6 {
flex: 0 0 50%;
max-width: 50%;
}
}
对应 HTML：<div class="col-lg-6 my-col-2xl-6">
修改断点后，container 宽度不生效？优先级和混合宏是关键
.container 的宽度由 @include media-breakpoint-up(lg) 等混合宏生成多层规则，纯 CSS 媒体查询容易被覆盖：
- 不要只写
@media (min-width: 1024px) { .container { max-width: 1280px; } }——它会被 Bootstrap 编译出的@media (min-width: 992px)规则压住 - 要么提高选择器权重（如
.container.custom-2xl），要么直接改$container-max-widths - 若坚持用 CSS，必须加
!important（仅限兜底，长期维护成本高）
真正麻烦的不是写几行 @media，而是断点一旦脱离 Sass 变量体系，所有依赖它的逻辑（栅格计算、间距工具、mixins 调用）就全断了——你得自己补全，而且没人帮你验证兼容性。
