直接修改 Sass 变量 $grid-breakpoints 并重新编译是唯一可靠方式，硬覆盖 CSS 媒体查询无效；Bootstrap 的 JS 组件、工具类和 HTML 类名均依赖预编译断点值，漏掉重编译或未同步更新 $container-max-widths 等变量将导致行为异常。

Bootstrap 4/5 的 $grid-breakpoints 怎么改才生效

直接改 Sass 变量是唯一可靠方式，硬覆盖 CSS 媒体查询几乎必然失败。因为 Bootstrap 的折叠逻辑（如 navbar-collapse）依赖预编译时生成的断点类（.d-none .d-md-flex 等），运行时改 CSS 不影响这些类的行为。

常见错误现象：max-width: 991px 下导航栏仍不折叠，或折叠后点击按钮无反应——本质是 JS 判断了 document.body.classList.contains('navbar-expand-md')，而这个类名和内部 @media 规则都来自原始断点值。

• 必须在自定义 Sass 文件中 @import Bootstrap 源码前，重定义 $grid-breakpoints，例如：

  $grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,  // 改成 840px 就从 768px 开始折叠
    lg: 992px,
    xl: 1200px,
    xxl: 1400px
  );

• 改完后必须重新编译 Sass，纯 CSS 替换 @media 规则无效——Bootstrap 的 JS 组件（如 Dropdown、Offcanvas）也读取这些断点做尺寸判断
• 如果用 CDN 或 prebuilt CSS，这条路走不通；只能换方案（见下一条）

不用 Sass 编译时怎么让 navbar 在 840px 折叠

绕过断点机制，用 data-bs-breakpoint 属性强制指定折叠阈值（Bootstrap 5.3+ 支持，旧版不支持）。

使用场景：项目已用 CDN 引入 Bootstrap，无法改动构建流程，又必须调整折叠时机。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

立即学习“前端免费学习笔记（深入）”；

• 给 nav 元素加属性：

  <nav class="navbar navbar-expand-md">
    <div class="container-fluid">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" data-bs-breakpoint="md">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbar">...</div>
    </div>
  </nav>

• data-bs-breakpoint="md" 表示“按 md 断点逻辑折叠”，但你得先确保 md 对应的宽度是你想要的——这又回到第一种方式；所以更实际的做法是：用 data-bs-breakpoint="sm" 让它在 576px 折叠，或干脆写死 JS 判断
• 若用 Bootstrap 5.2 及更早版本，该属性不存在，只能手动监听 resize 并切换 .navbar-collapse.show 类，同时控制 .navbar-toggler 的显示隐藏

为什么改了 $grid-breakpoints 后某些组件样式错乱

因为很多工具类（如 .col-md-6、.d-lg-block）和组件（Offcanvas 的 backdrop、Modal 的尺寸）都绑定同一套断点变量。改一个，全链路都变。

性能影响小，但兼容性风险高：第三方基于默认断点写的组件库（比如某些 Admin 模板）可能失效；container 宽度、gutter 间距也会同步偏移。

• 只改 md 不改其他值，会导致 lg 断点类（如 .d-lg-none）实际触发宽度变成 992px，但视觉上你期望它在 840px 后才生效——断点语义就乱了
• 建议同步调整整套 $grid-breakpoints，保持相对比例，比如把 md 设为 840px，lg 设为 1080px，避免中间出现空档
• 检查 $container-max-widths 是否同步更新，否则 .container 在新 md 下仍用旧宽度，内容会溢出或留白异常

改断点不是调个 CSS 值的事，它牵着 Sass 变量、JS 判断、HTML 类名生成、容器宽度计算四条线。漏掉任意一环，折叠行为就不可控。最常被忽略的是：改了断点却不重编译，或者忘了同步更新 $container-max-widths 和 $spacer 相关响应式逻辑。