如何让Bootstrap 4导航栏在1024px屏幕（如iPad Pro）显示移动端版本

我懂你的痛点——Bootstrap 4默认在992px（lg断点）及以下才会把导航栏折叠成移动端菜单，而iPad Pro这类1024px宽的屏幕刚好卡在这个断点之上，所以会直接显示桌面版导航。要调整这个行为，有两种实用方案，看你项目的具体情况来选：

方法一：自定义CSS覆盖（适合用CDN或预编译CSS的项目） #

这个方法不用动Bootstrap源码，直接加一段自定义CSS就能搞定。核心思路是：在1024px及以下的屏幕上，强制隐藏桌面版导航内容，显示移动端的切换按钮；超过1024px时再恢复桌面版的显示逻辑。

首先确保你的导航栏HTML是标准结构，包含navbar-expand-lg、navbar-toggler和collapse navbar-collapse这些必要的类：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

然后添加这段自定义CSS：

/* 屏幕宽度≤1024px时，切换为移动端菜单 */
@media (max-width: 1024px) {
  .navbar-expand-lg .navbar-collapse {
    display: none !important;
  }
  .navbar-expand-lg .navbar-toggler {
    display: block !important;
  }
  /* 可选：移除切换按钮点击后的焦点边框，让样式更整洁 */
  .navbar-expand-lg .navbar-toggler:focus {
    outline: 0;
    box-shadow: none;
  }
}

/* 屏幕宽度>1024px时，恢复桌面版导航 */
@media (min-width: 1025px) {
  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
  }
  .navbar-expand-lg .navbar-toggler {
    display: none !important;
  }
}

这里的!important是为了确保自定义样式能覆盖Bootstrap的默认规则，毕竟它的优先级相对较高。

方法二：修改Sass变量（适合用Sass编译Bootstrap的项目） #

如果你的项目是用Sass编译Bootstrap的，那这个方案更优雅，不需要依赖!important。Bootstrap 4提供了专门的变量$navbar-expand-breakpoint来控制导航栏的展开断点，默认值是lg（对应992px）。我们只需要把它改成1025px，这样屏幕宽度≥1025px时显示桌面版，≤1024px时自动折叠成移动端菜单。

在你的Sass入口文件里这么写：

// 先导入Bootstrap的变量文件，才能覆盖默认值
@import "bootstrap/scss/variables";

// 修改导航栏展开断点为1025px
$navbar-expand-breakpoint: 1025px;

// 再导入Bootstrap核心样式
@import "bootstrap/scss/bootstrap";

重新编译Sass后，生成的CSS就会自动应用这个新断点，完美匹配你的需求。

小提醒 #

• 如果你用的是其他展开类（比如navbar-expand或navbar-expand-md），记得把CSS选择器里的.navbar-expand-lg改成对应的类名。
• 测试时可以用浏览器开发者工具，把屏幕宽度调到1024px，验证导航栏是否自动切换成移动端样式。

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