Bootstrap 5 断点无法通过纯 CSS 真正自定义，必须重编译 Sass 并覆盖 $grid-breakpoints 和 $container-max-widths；直接写 @media 或修改 HTML 类名无效，因所有响应式类如 col-md-6 均为编译时静态生成。
不能真正自定义断点，只能局部覆盖容器宽度或媒体查询行为。 Bootstrap 5 的响应式类（如 col-md-6、d-lg-none）是 Sass 编译时静态生成的，所有 @media 规则在 CSS 文件里早已写死。你用纯 CSS 无法让 col-md-6 在 840px 触发，它永远只认原始断点值（比如 min-width: 768px）。
为什么直接写 @media (min-width: 840px) 不影响 col-md-6
因为 col-md-6 对应的 CSS 规则是编译出来的独立规则，例如：
@media (min-width: 768px) {
.col-md-6 { flex: 0 0 auto; width: 50%; }
}
你新增的 @media (min-width: 840px) 和它完全无关——既不替换它，也不禁用它。浏览器会同时应用两条规则，但 col-md-6 的行为仍由原始媒体查询控制。
- 你看到的“生效”只是自己写的样式叠加，不是断点逻辑被修改
- 想让
col-md-6在 840px 才显示？做不到。这个类名根本不会在 840px 被激活 - BootstrapVue 中的
<b-col md="6"></b-col>同样无效，它依赖的是 JS 内部硬编码的断点映射，不是 CSS
唯一可行的纯 CSS 替代方案：覆盖 .container 宽度
如果你只关心容器最大宽度（比如把 .container 在桌面端撑到 1280px），可以用 CSS 媒体查询覆盖，但必须满足三个条件：
立即学习“前端免费学习笔记（深入）”；
- 你的 CSS 文件必须在
bootstrap.min.css之后加载 - 媒体查询的
min-width值必须和你所用 Bootstrap 版本的原始断点完全一致（v5.3+ 是xl: 1200px、xxl: 1400px） - 选择器保持简洁，例如直接写
.container，不要加前缀或降权
示例（适用于 v5.3+）：
@media (min-width: 1200px) {
.container {
max-width: 1280px;
}
}
@media (min-width: 1400px) {
.container {
max-width: 1440px;
}
}
注意：!important 不必要，顺序和断点值对了就能干净覆盖。
哪些操作看似有效实则危险
以下做法容易让你误以为“改成功了”，但实际埋下错位隐患：
- 写
div .container { max-width: 1280px; }：选择器权重下降，可能被 Bootstrap 原生规则覆盖 - 用
@media (min-width: 1201px)：哪怕只差 1px，就不会命中 Bootstrap 的xl断点逻辑，导致容器宽度跳变 - 只改
.container却忽略.container-xl、.container-xxl：这些类也各自有独立媒体查询，需分别覆盖 - 试图用 CSS 变量（如
--bs-breakpoint-xl）驱动媒体查询：原生 Bootstrap 5 不导出断点为 CSS 变量，该变量不存在，@media (min-width: var(--bs-breakpoint-xl))会直接失效
真要改断点触发时机，必须动 $grid-breakpoints 并重编译 Sass；纯 CSS 能做的，仅限于视觉层的有限覆盖，且极易因版本升级或组件组合而意外失效。
