不能通过自定义CSS媒体查询重置Bootstrap断点，因栅格类如.col-lg-6由Sass编译时依据$grid-breakpoints静态生成，运行时CSS媒体查询对其无效；真要修改须重定义Sass变量并完整重编译。
不能通过自定义CSS媒体查询“重置”Bootstrap的响应式断点——.col-lg-6、d-xl-none这类类名的触发逻辑完全由Sass编译时的$grid-breakpoints决定，你写的@media (min-width: 1024px)对它们毫无影响。
为什么直接写@media无效
Bootstrap所有栅格和工具类都是Sass在构建阶段静态生成的，比如.col-lg-6背后对应的是@media (min-width: 992px)（v4）或@media (min-width: 992px)（v5），这个阈值硬编码在源码里，不读取你后来写的任何CSS媒体查询。
常见错误现象包括：
-
.col-custom-6类根本不存在，浏览器开发者工具里搜不到对应CSS规则 - 自己写的
@media (min-width: 1440px) { .my-col { flex: 0 0 50%; } }生效了，但.col-xl-6依然在1200px（v5）或1200px（v4）就切换了，两者行为错位 - 样式被覆盖：你的媒体查询选择器权重低，或者加载顺序靠后，被Bootstrap原生规则压住
想临时适配某块区域？用组合类，别造新断点
如果你只是想让某个组件在1440px以上才显示，或在1024px以下隐藏，不要试图“新增xxl断点”，直接复用已有类组合：
立即学习“前端免费学习笔记（深入）”；
-
d-none d-lg-block d-xxl-none：在lg及以上显示，xxl及以上隐藏（需Bootstrap 5.3+支持xxl） -
col-12 col-md-6 col-xl-4：逐级细化，避免跨断点跳跃 - 配合
max-width内联控制：style="max-width: 1400px"比媒体查询更直接，适合局部微调
这种写法不依赖新断点，也不需要重编译，上线快、调试直观。
真要改断点？必须重定义Sass变量并重编译
唯一可靠路径是修改$grid-breakpoints和$container-max-widths两个Sass map，并确保它们键名完全一致、值递增合理：
- 新建
_custom-breakpoints.scss，开头必须先@import "bootstrap/scss/functions" - 紧接着定义
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1440px ); - 同步更新
$container-max-widths: ( sm: 540px, md: 720px, lg: 1000px, xl: 1400px ); - 最后
@import "bootstrap/scss/bootstrap" - CDN引入的CSS文件完全无效；纯HTML/JS动态加
col-xl-6也无效——因为类名本身就没被编译出来
漏掉functions导入，map-get会报错；漏掉container-max-widths同步，.container会在新旧断点交界处卡死在旧宽度。
最常被忽略的不是“怎么写媒体查询”，而是“谁在消费这个断点”：CSS类、容器宽度、JS组件（如BootstrapVue的breakpoints配置）、甚至第三方插件都可能各自维护一套断点映射。改一个地方，其他地方没跟上，布局就会出裂痕。
