不能直接用CSS媒体查询新增Bootstrap 4断点类，因其栅格类由Sass变量$grid-breakpoints在编译时静态生成；手写@media仅能覆盖样式，无法改变原生类触发时机；要新增如.col-xxl-6，必须修改Sass源码并重编译。
不能直接用 CSS 媒体查询“新增” Bootstrap 4 的响应式断点类（比如 .col-xxl-6），因为这些类名是 Sass 编译时静态生成的，不读你写的 @media 规则。你手写 @media (min-width: 1440px) { .my-col { flex: 0 0 50%; } } 是有效的，但它不会让 .col-xl-6 变成在 1440px 生效——那还是在 1200px 触发。
为什么直接加 @media 不会生成新断点类
Bootstrap 4 的栅格工具类（.col-md-4、.d-lg-none 等）全部由 $grid-breakpoints 这个 Sass map 驱动，在构建时一次性编译成 CSS。它不监听运行时或后加的媒体查询。
- 你写的
@media (min-width: 1024px)不会自动让.col-lg-6移到 1024px 生效——原生类仍按默认值（lg: 992px）工作 -
.col-custom-6这种类根本不存在，除非你改 Sass 源码并重新编译 - 常见错误现象：
d-xl-none在页面上没效果，往往是因为你改了断点却没重编译 CSS，浏览器压根没加载到这个类的规则
CDN 或纯 CSS 项目：用媒体查询覆盖已有行为
如果你用的是 bootstrap.min.css CDN，没法改 Sass，那就只能靠自定义 CSS “补位”，重点是精准匹配、顺序正确、避免副作用。
- 你的 CSS 文件必须在
bootstrap.min.css之后引入，否则被覆盖 - 断点值必须严格对齐 Bootstrap 4 默认值：
sm: 576px、md: 768px、lg: 992px、xl: 1200px；写成991px或1201px就会错位 - 只覆盖你需要的部分，例如扩大桌面容器宽度：
@media (min-width: 1200px) { .container { max-width: 1280px; } } - 别写
.container { max-width: 1280px }这种无媒体查询的全局规则——小屏下会强制拉宽，导致横向滚动条
想让 .col-xxl-6 这类新类生效？必须改 Sass 并重编译
这是唯一能让新断点类名真正可用的方式，但门槛高、流程固定，漏一步就静默失败。
立即学习“前端免费学习笔记（深入）”；
- 必须在
@import "bootstrap/scss/variables"之前定义$grid-breakpoints，且完整包含所有 key：$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1440px );
-
$container-max-widths必须同步更新，键名完全一致、值递增合理；漏掉lg，容器在 1024–1439px 区间就卡在旧宽度（如 960px）不动 - 必须用构建工具（如 Webpack + sass-loader）重新编译，CDN 或直接 link CSS 文件的方式无效
- 如果用了 BootstrapVue，还得额外配置
breakpoints插件参数，否则<b-col xl="6"></b-col>会报 “Unknown breakpoint 'xl'”
最常被忽略的点是 $container-max-widths 和 $grid-breakpoints 键值不匹配——断点挪宽了，容器却没跟上，结果布局中间留白，还以为是 CSS 写错了。真要动断点，这两个变量得像齿轮一样咬合着调。
