bootstrap 5 断点需在 sass 源码中覆盖 $grid-breakpoints 变量，须在引入 functions 后、variables 前定义完整递增 map（xs 必为 0），并重启构建；.container 宽度应重定义 $container-max-widths 而非仅用媒体查询。
Bootstrap 5 的断点变量在哪改
不能直接改 _variables.scss 里已编译的 CSS 文件，必须从源码层面覆盖 Sass 变量。Bootstrap 5 默认断点是用 $grid-breakpoints 这个 map 定义的，它控制所有响应式类（如 .col-md-6、.d-lg-block）的触发宽度。
实操建议：
- 新建一个
_custom-breakpoints.scss，在引入 Bootstrap 主文件前，先定义并覆盖$grid-breakpoints - 必须用
!default声明原始变量才可被覆盖，所以你的自定义值要写在@import "~bootstrap/scss/functions";之后、@import "~bootstrap/scss/variables";之前 - 完整 map 要包含全部键（
xs,sm,md,lg,xl,xxl），缺一个会导致后续类生成失败 - 例如把
lg从992px改成1024px，得写：$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1200px, xxl: 1400px) !default;
用媒体查询手动覆盖 .container 宽度不生效？
因为 Bootstrap 5 的 .container 使用了 max-width + @include media-breakpoint-up(lg) 等混合宏生成多层规则，CSS 优先级高，纯媒体查询容易被覆盖。
实操建议：
- 不要只写
@media (min-width: 1024px) { .container { max-width: 1280px; } }—— 它会被 Bootstrap 编译出的@media (min-width: 992px)规则压住 - 要么提高选择器权重，比如用
.container:not(.no-custom)配合额外 class；要么直接在 Sass 中重定义$container-max-widthsmap - 若坚持用 CSS 媒体查询，必须匹配 Bootstrap 原始断点逻辑：查清你改的是哪个断点，然后用相同或更高优先级的
min-width值，并加!important（仅限兜底，不推荐长期用）
改完断点，col-* 类没更新？
常见错误现象：修改了 $grid-breakpoints，但 .col-lg-6 还是在 992px 生效，新断点没起作用。
原因和解决：
- 没重新编译 Sass —— Webpack/Vite 不会自动监听
_variables.scss外部依赖，改完要重启构建进程 -
$grid-columns或$grid-gutter-width被意外覆盖，导致栅格系统整体失效（Bootstrap 栅格依赖多个变量联动） - 检查浏览器开发者工具里，是否真加载了你自定义的 CSS 文件，而不是 CDN 上未修改的 bootstrap.min.css
- 用
console.log($grid-breakpoints)在 Sass 中临时调试（需配置 Sass logger 或编译时报错提示）
移动端适配时，自定义断点引发视口混乱
把 xs 断点从 0 改成 320px 后，iPhone 小屏上 .d-block 消失、布局错乱 —— 这是因为 xs 是「无媒体查询」的兜底断点，改它等于删掉了最小尺寸的默认样式。
关键提醒：
-
xs必须保持为0，否则.col、.d-flex等无后缀类将完全不生效 - 真正该调的是
sm（首个带@media的断点），比如设为480px来适配老安卓屏 - 所有自定义断点值必须是递增整数，不能出现
sm: 600px, md: 500px这种倒置，否则编译会静默失败或生成无效 CSS
断点不是调数字游戏，每个值都牵连二十多个类的生成逻辑，改之前先跑一遍 npm run build 看控制台有没有 Sass warning。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
