为什么Bootstrap的navbar-toggler在移动端默认显示nav-item？

问题修复方案 #

你遇到的移动端导航默认展开的问题，是3处Bootstrap导航的基础配置错误导致的，和你设置的aria-expanded属性无关，按下面的步骤修改即可解决：

• 错误1：导航折叠容器缺少collapse类
  Bootstrap的折叠导航依赖collapse类控制默认状态，你当前的折叠容器代码没有加这个类，所以默认是展开状态。
  把原代码：

  <div class="navbar-collapse" id="navbarCollapse">
  

  修改为：

  <div class="collapse navbar-collapse" id="navbarCollapse">
  

• 错误2：导航触发按钮配置错误
  你当前的按钮class多了多余的collapse类，且aria-controls属性值和绑定的折叠容器id不一致，修改后代码如下：

  <button
    class="navbar-toggler collapsed"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#navbarCollapse"
    aria-controls="navbarCollapse"
    aria-expanded="false"
    aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  

• 错误3：标签语法错误
  你代码中PROJECT导航项的闭合标签多写了class属性，属于语法错误，把</li class="navbar-item">修改为正常的</li>即可。

修改完成后刷新页面，移动端视图下导航就会默认折叠，只有点击汉堡按钮才会展开。

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