新增断点“2xl”必须重编译Sass，同步更新$grid-breakpoints和$container-max-widths，并在BootstrapVue中配置breakpoints数组，否则col-2xl-6等类不会生成且容器宽度失效。
加新断点（比如 "2xl"）必须重编译 Sass，只改 CSS 或 JS 无效——你写的 @media (min-width: 1440px) 不会让 col-2xl-6 自动出现，它根本不存在。
必须重定义 $grid-breakpoints 并重新编译
Bootstrap 所有带断点前缀的类（col-xl-6、d-lg-none、text-md-center）都是 Sass 编译时根据 $grid-breakpoints 这个 map 生成的。新增一个键，就得让它参与编译流程。
- 新建自定义 Sass 文件（如
custom.scss），开头就定义：$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, "2xl": 1440px );
- 顺序不能错：先
@import "bootstrap/scss/functions"，再@import "bootstrap/scss/variables"，紧接着放上面那段定义，最后@import "bootstrap/scss/bootstrap" - 用 Webpack +
sass-loader、Vite 的@vitejs/plugin-sass或 Dart Sass CLI 编译，生成新 CSS 替换原来的bootstrap.min.css - 漏掉
functions导入，map-get等函数不可用，变量重定义会失败
$container-max-widths 必须同步更新
只加断点不调容器宽度，.container-2xl 会失效或卡在旧尺寸上——因为容器最大宽度由另一个独立变量 $container-max-widths 控制，它和 $grid-breakpoints 是配对关系。
-
$container-max-widths的 key 必须与$grid-breakpoints中非xs的键完全一致（"2xl"得有，xs不需要） - 值要递增合理，例如：
$container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px, "2xl": 1380px );
- 如果
"2xl"键存在但$container-max-widths里没写，.container-2xl会 fallback 到默认值（通常是1140px），不是你想要的宽度
用了 BootstrapVue？还得配 breakpoints 插件参数
<b-col xl="6"></b-col> 这类组件不读 CSS，它靠 Vue 插件初始化时传入的 breakpoints 数组识别 token。Sass 里加了 "2xl"，插件里不声明，组件就报 Unknown breakpoint '2xl'。
- 在
Vue.use(BVConfigPlugin, { ... })中完整传入：breakpoints: ['sm', 'md', 'lg', 'xl', '2xl']
- 顺序必须从小到大，大小写和引号风格（
"2xl"vs2xl）要和 Sass 里定义的完全一致 - Bootstrap 5.2+ 才支持非标准键名（如
"2xl"）；5.1.x 及更早版本只认xs–xxl，加了也白加
别指望 CSS 媒体查询“模拟”新断点
手写 @media (min-width: 1440px) { .my-col-2xl { width: 50%; } } 没法让 col-2xl-6 生效，它只是个普通类，和 Bootstrap 栅格系统无关。
- 你得自己实现整套栅格逻辑（flex、gutter、offset、order），等于放弃框架
- 选择器权重容易被原生
col-xl-6覆盖，尤其当你的 CSS 加载顺序靠前时 - 工具类如
px-2xl-4、d-2xl-none根本不会生成，除非你 Sass 重编译 - CDN 用户完全无法加新断点——预编译 CSS 里没有这些类，改 JS 或 HTML 类名毫无意义
最常被忽略的是 $container-max-widths 和 BootstrapVue 的 breakpoints 配置，光改 $grid-breakpoints 只完成三分之一；另外，"2xl" 这种带引号的键名在旧版 Bootstrap 中不被识别，得确认版本兼容性。
