修改 $grid-breakpoints 映射变量即可生效，需在引入 bootstrap sass 前覆盖该变量并同步更新 $container-max-widths，确保键名完整、值带单位、顺序递增，且重新编译 css 才能生效。
修改 $grid-breakpoints 映射变量即可生效
Bootstrap 5 的断点不是写死的 CSS 类，而是由 Sass 变量 $grid-breakpoints 驱动的映射（map），所有 .col-md-6、.d-lg-none 这类类名都基于它生成。改它，就等于重定义整套响应式系统。
关键点在于：必须在引入 Bootstrap 源文件 之前 覆盖该变量，否则默认值已编译进 CSS，后续覆盖无效。
- 在自定义 Sass 入口文件（如
custom.scss）顶部先声明新映射 - 确保
@import "bootstrap/scss/functions";和@import "bootstrap/scss/variables";在你覆盖变量之后、但@import "bootstrap/scss/bootstrap";之前 - 不要只改
$screen-sm这类旧版单值变量——Bootstrap 5 已弃用它们，只认$grid-breakpoints
正确写法示例：把 md 断点从 768px 改为 840px
下面这段代码必须放在你自己的 Sass 文件最前面（且早于 Bootstrap 主 import）：
$grid-breakpoints: ( xs: 0, sm: 576px, md: 840px, // ← 这里改了 lg: 992px, xl: 1200px, xxl: 1400px ); <p>@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/grid"; // 其他模块按需引入... </p>
改完后，.col-md-6 会在视口 ≥ 840px 时生效，.d-md-block 同理。注意：md 对应的媒体查询会自动变成 @media (min-width: 840px)。
- 键名（
xs、md）不能删减或重命名，否则依赖它的 mixin（如media-breakpoint-up(md)）会报错 - 值必须是带单位的长度（
840px），不能写840或"840px" - 顺序必须从小到大，否则栅格计算逻辑会出错
改完断点后，$container-max-widths 也要同步更新
容器最大宽度（.container 的 width）由另一个映射 $container-max-widths 控制，它默认和 $grid-breakpoints 键对齐。如果你改了 md: 840px 却没动容器，就会出现“列在 840px 生效，但容器还在 768px 才变宽”的错位。
做法很简单：在同一个位置一并覆盖它：
$grid-breakpoints: ( xs: 0, sm: 576px, md: 840px, lg: 992px, xl: 1200px, xxl: 1400px ); <p>$container-max-widths: ( xs: 100%, sm: 540px, md: 816px, // ← 通常设为断点值 - 24px（左右各 12px gutter） lg: 960px, xl: 1140px, xxl: 1320px ); </p>
这里 md: 816px 是常见选择（840 − 24），但你可以按设计稿定，只要保持语义一致就行。
编译后验证是否生效的三个检查点
光改了 Sass 不代表成功，得确认输出 CSS 真的变了：
- 搜索编译后的 CSS 文件，找
@media (min-width: 840px)—— 如果没出现，说明变量覆盖时机错了，或路径导入顺序不对 - 检查
.col-md-6是否仍存在；如果没了，可能是你删了md键，或@import "bootstrap/scss/grid"被跳过 - 浏览器里用开发者工具看某个元素的
computed样式，切换设备宽度到 839px / 840px，观察grid-column或display是否恰好在 840px 切换
最容易被忽略的是：用 CLI 工具（如 sass 命令）直接编译单个文件时，不会自动加载 Bootstrap 的 _functions.scss，导致变量解析失败——必须确保完整走 Bootstrap 的 Sass 构建链路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
