Bootstrap 4 navbar-expand-lg自定义断点不生效问题求助

你遇到的问题其实很常见——Bootstrap的导航栏展开断点是独立于网格断点变量的，只修改$grid-breakpoints并不会自动同步到导航栏的展开逻辑里。下面是具体的解决步骤：

核心原因 #

Bootstrap为导航栏的展开/折叠行为单独定义了$navbar-expand-*系列变量，默认情况下这些变量绑定的是官方默认的网格断点值（比如默认$navbar-expand-lg是992px）。当你自定义了$grid-breakpoints后，需要手动同步更新对应的导航栏展开变量，导航栏才会使用新的断点。

具体解决方案 #

在导入Bootstrap的SCSS文件之前，先覆盖对应的导航栏展开变量，确保它和你自定义的lg网格断点一致：

// 1. 先自定义你的网格断点
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 1250px,
  xl: 1365px
);

// 2. 同步更新导航栏的lg展开断点，绑定到你自定义的lg值
$navbar-expand-lg: $grid-breakpoints.lg;

// 3. 最后导入Bootstrap的SCSS
@import "bootstrap";

这样编译出来的CSS中，navbar-expand-lg就会在1250px的断点处触发导航栏展开，而不是默认的992px了。

额外注意事项 #

• 如果你使用的是Bootstrap预编译好的CSS文件（不是通过SCSS定制编译），这种方法不适用，你需要改用SCSS定制的方式来生成自己的样式文件。
• 确保所有变量覆盖都在导入Bootstrap之前完成，否则Bootstrap会使用默认值生成样式，你的自定义变量不会生效。

内容的提问来源于stack exchange，提问作者Jorge Zuverza