Bootstrap 5自定义断点唯一可靠方式是重定义Sass变量$grid-breakpoints并同步更新$container-max-widths等关联变量，必须在@import "bootstrap/scss/variables"前完成，且需通过构建工具重新编译，CDN或直接写CSS无效。
直接加@media无效，因为Bootstrap 4的类名不跟着你写的新查询走
你在CSS里写了@media (min-width: 1024px) { .my-col { flex: 0 0 50%; } }，但.col-lg-6还是在992px触发——这不是bug，是设计使然。Bootstrap 4的栅格工具类（如.col-md-4、.d-xl-none）全由Sass编译生成，它们的断点阈值硬编码在$grid-breakpoints变量里，不读你手写的CSS媒体查询。
常见错误现象：.col-custom-6没效果、px-custom-3类根本不存在、自己写的@media (min-width: 1024px)样式被Bootstrap原生类覆盖（因选择器权重低或顺序靠后）。
- 想让
.col-xxl-6生效？必须改Sass源码，不是加CSS - 只想临时控制某块区域？用
d-none d-lg-block d-xxl-none组合，别依赖“区间” - 真要手写媒体查询，请严格复用Bootstrap 4默认断点值：
sm: 576px、md: 768px、lg: 992px、xl: 1200px，否则行为错位
改$grid-breakpoints必须在@import "bootstrap/scss/bootstrap"之前
Bootstrap 4的断点系统由$grid-breakpoints这个Sass map驱动，不是一堆独立变量（比如$screen-lg-min）。你改$screen-lg-min，.col-lg-6照样在992px生效——那个变量只是旧版兼容别名，早已不参与编译逻辑。
正确做法是在自定义Sass文件顶部，按顺序执行：
立即学习“前端免费学习笔记（深入）”；
- 先
@import "bootstrap/scss/functions"（确保map-get等可用） - 再
@import "bootstrap/scss/variables" - 紧接着重定义
$grid-breakpoints，例如：$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 1024px, // 把原992px提到1024px xl: 1440px );
- 最后
@import "bootstrap/scss/bootstrap"
漏掉任一环节，变量就被默认值覆盖，编译出的CSS还是原样。
$container-max-widths不同步，容器就卡在旧宽度上
你把lg断点提到1024px，但$container-max-widths里的lg还是960px？那在1024–1199px视口下，.container会死卡在960px，左右留白严重——这是最常被忽略的错配。
$container-max-widths必须和$grid-breakpoints键名完全对齐，且值递增合理：
-
xs不用出现在$container-max-widths中（它对应max-width: 100%） - 其他所有key都得有，漏一个就会回退到Bootstrap默认值
- 示例：
$container-max-widths: ( sm: 540px, md: 720px, lg: 1000px, // 对应 lg: 1024px xl: 1400px );
BootstrapVue用户：光改Sass不够，还得配breakpoints插件参数
你在HTML写了<b-col cols="12" lg="6">，但lg行为没变——大概率是因为BootstrapVue没读到新断点。它底层不解析Sass，而是靠插件初始化时传入的breakpoints数组识别token。
必须显式配置：
- 在
Vue.use(BVConfigPlugin, { breakpoints: ['xs', 'sm', 'md', 'lg', 'xl'] })里传入完整数组 - 数组顺序必须从小到大，且与
$grid-breakpoints键名一致 - 新增了
xxl？数组里就得加'xxl'，否则<b-col xxl="4">直接报warning “Unknown breakpoint 'xxl'”
改断点从来不是单点操作：Sass变量决定CSS生成，breakpoints数组决定Vue组件解析，$container-max-widths决定容器撑开逻辑——三者缺一不可，且数值必须对齐。稍有错位，布局就卡在某个宽度不动。
