Bootstrap 5 自定义断点唯一可靠方式是重定义 $grid-breakpoints 并重新编译 Sass，必须同步更新 $container-max-widths 和 BootstrapVue 的 breakpoints 数组，且所有变量须在 @import "bootstrap/scss/variables" 前定义，否则类不生成或布局错位。
$grid-breakpoints必须重定义并重编译，否则所有“改断点”操作都是假动作。
改 $grid-breakpoints 必须在 Sass 编译前完成
Bootstrap 5 的所有响应式类（如 col-md-6、d-lg-none）都在 Sass 编译时静态生成，$grid-breakpoints 是唯一源头。你改了变量但没重编译 CSS，浏览器里看到的仍是默认的 @media (min-width: 1200px)。
- 必须把自定义变量写在
@import "bootstrap/scss/variables"之前 - 必须先
@import "bootstrap/scss/functions"，否则map-get等函数不可用 - 不能只写
@import "bootstrap"—— 那会提前加载默认值，你的覆盖无效 - 示例顺序：
$grid-breakpoints: ( sm: 576px, md: 768px, lg: 1024px, xl: 1440px );<br>@import "bootstrap/scss/functions";<br>@import "bootstrap/scss/variables";<br>@import "bootstrap/scss/bootstrap";
$container-max-widths 不同步更新，容器就卡住
断点改到 lg: 1024px，但 $container-max-widths 里 lg 还是 960px？那在 1024–1439px 区间，.container 就死卡在旧宽度，左右大片留白。
-
$container-max-widths的键必须和$grid-breakpoints完全一致（大小写、连字符、引号都不能差） -
xs不需要出现在$container-max-widths中（它默认 100%） - 值应略小于下一个断点，比如
xl: 1440px对应xl: 1400px，避免跳变 - 漏掉某个键（如没写
xl），.container-xl会回退到上一级或失效
用了 BootstrapVue，光改 Sass 不够
<b-col lg="6"></b-col> 这类组件不读 CSS，只认 BVConfigPlugin 初始化时传入的 breakpoints 数组。你 Sass 里加了 "2xl"，但插件配置里没加，控制台就会报 Unknown breakpoint '2xl'。
- 必须在
Vue.use(BVConfigPlugin, { breakpoints: [...] })中一次性声明完整数组 - 数组内容要和
$grid-breakpoints的 key 逐字节一致（包括大小写和是否带引号） - 顺序必须从小到大，否则栅格计算错乱
- 新增断点名（如
xxl）后，col-xxl-4类仍需 Sass 重编译才存在，否则 HTML 写了也无效
别指望纯 CSS 媒体查询能绕过断点逻辑
手写 @media (min-width: 1440px) { .my-layout { ... } } 没法让 col-lg-6 在 1440px 触发——它触发时机由 Sass 编译时决定，和你的 CSS 文件无关。这类写法只能做局部样式补丁，无法参与 Bootstrap 栅格系统。
- 自己写的媒体查询不会生成
col-*或d-*类，得手动命名、维护、加权 - 容易和原生类冲突（比如选择器权重不够，被
.col-md-6覆盖） - 无法影响
.row的 flex 行为、.container宽度、JS 组件（如Offcanvas）的断点判断 - CDN 引入的
bootstrap.min.css下，任何 Sass 变量修改都完全无效
真正生效的只有重编译这一条路；最容易被忽略的是 $container-max-widths 和 BootstrapVue 的 breakpoints 配置，漏掉任一环，断点就只“半生效”。
