必须重编译sass并正确覆盖$grid-breakpoints等关联变量，才能修改bootstrap 5响应式断点；手动改css媒体查询无效，且需同步更新$container-max-widths和$grid-gutter-width等变量以确保一致性。
直接改 CSS 文件里的媒体查询根本不管用
Bootstrap 5 的所有响应式类（比如 col-md-6、d-lg-none）都是 Sass 编译时静态生成的。你在浏览器里看到的 @media (min-width: 768px) 规则，早在页面加载前就写死在 CSS 文件里了。所以，在自定义 CSS 中写：
@media (min-width: 800px) { .my-layout { ... } }完全不影响 col-md-6 的触发时机——它还是在 768px 生效。
常见错误现象：
– 页面上 col-md-6 在 768px 切换，但你希望它在 820px 才生效，手动加媒体查询没反应
– .container 在 1400px 宽度卡住不动，自己写的 @media (min-width: 1440px) { .container { max-width: 1320px; } } 被覆盖或不生效
– 新增的 col-2xl-4 类在浏览器开发者工具里根本搜不到
必须重编译 Sass，且导入顺序不能错
官方唯一可靠方式是覆盖 $grid-breakpoints 变量并重新编译。这不是“改个配置”，而是构建链的一环。漏掉任一环节都会导致类缺失、容器错位或编译报错。
- 先
@import "bootstrap/scss/functions"—— 没它，Sass 会报function undefined - 再
@import "bootstrap/scss/variables"—— 它声明了带!default的原始变量 - 紧接着重定义完整 map：
$grid-breakpoints: ( xs: 0, sm: 576px, md: 820px, lg: 1024px, xl: 1280px, xxl: 1440px ) !default;
缺一个键（比如删了xs），后续media-breakpoint-up(xs)就会编译失败 - 最后
@import "bootstrap/scss/bootstrap"—— 所有类、容器宽度、工具前缀都依赖这个阶段生成
新增或修改断点必须同步更新关联变量
只动 $grid-breakpoints 是不够的。.container 宽度由 $container-max-widths 控制，栅格间距由 $grid-gutter-width 驱动。它们的 key 必须和断点 map 严格一致。
例如把 lg 从 992px 改成 1024px，同时要：
- 在
$container-max-widths里补上lg: 1024px（或按比例设为lg: 960px） - 若新增
"2xl": 1600px，就得同步往$container-max-widths和$grid-gutter-width里加"2xl": 2rem这类条目 - 否则会出现：列宽正常，但
.container还卡在旧宽度，内容被截断或留白过大
别手写像素值，用 mixin 才安全
在自定义样式中硬写 @media (min-width: 768px) 是危险的。一旦你改了 md 断点值，这些固定像素就彻底失效。
正确做法是调用 Bootstrap 提供的 Sass mixin：
-
@include media-breakpoint-up(md) { .sidebar { width: 280px; } }→ 编译后自动适配你设的md值（比如 820px） -
@include media-breakpoint-down(lg) { ... }→ 生成@media (max-width: 1023.98px)，防边界重叠 - 避免手写
@media (min-width: 1024px)，除非你确认这个值永远不变
真正容易被忽略的是：$grid-breakpoints 修改后，所有基于它的逻辑（包括 JS 组件如 Offcanvas 的显示判断）都会联动变化。如果你只改了 CSS 层而没同步 JS 配置，某些交互可能在错误视口宽度下触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
