从Bootstrap3.x升级到4后，如何修改导航栏折叠断点？

刚从Bootstrap 3.x升级到4.x，想调整导航栏的折叠断点对吧？其实Bootstrap 4提供了两种更规范的方法，比3.x里直接改CSS要灵活得多，我给你详细说说：

Bootstrap 4是基于Sass构建的，所以最干净的方式是修改核心变量后重新编译，这样不会有样式冲突的问题。

步骤很简单：

• 首先，在你的Sass文件里，先覆盖Bootstrap的断点变量（如果需要自定义非标准断点的话），或者直接设置导航栏折叠断点：

  // 示例1：用Bootstrap内置的断点名称（比如设为md，对应768px）
  $navbar-expand-breakpoint: md;
  
  // 示例2：用自定义像素值（比如想在800px时折叠）
  // $navbar-expand-breakpoint: 800px;
  
  // 最后导入Bootstrap的主Sass文件
  @import "bootstrap";
  

• 然后用Sass编译器（比如node-sass、dart-sass）编译成CSS文件，替换原来的Bootstrap CSS即可。

这种方法的好处是完全贴合Bootstrap的设计体系，不会出现奇怪的样式兼容问题。

如果你的项目没法用Sass编译，也可以通过自定义CSS来强制覆盖默认样式，注意要把这段CSS放在Bootstrap官方CSS之后加载。

比如你想把导航栏的折叠断点改成900px，可以这么写：

/* 当屏幕宽度小于900px时，切换为折叠状态 */
@media (max-width: 899.98px) {
  .navbar-expand .navbar-collapse {
    display: none !important;
  }
  .navbar-expand .navbar-toggler {
    display: block;
  }
}

/* 当屏幕宽度大于等于900px时，保持展开状态 */
@media (min-width: 900px) {
  .navbar-expand .navbar-collapse {
    display: flex !important;
  }
  .navbar-expand .navbar-toggler {
    display: none;
  }
}

这里用899.98px而不是900px是为了和Bootstrap默认的媒体查询规则对齐，避免和其他断点产生冲突。

如果你的导航栏用的是navbar-expand-sm/navbar-expand-lg这类预设类，只需要把上面代码里的.navbar-expand换成对应的类名（比如.navbar-expand-sm）就行。

内容的提问来源于stack exchange，提问作者Helen ZH