如何在Bootstrap navbar中添加移动端不隐藏的额外下拉菜单

你当前代码的问题主要是3处：

• 两个下拉菜单共用了相同的id="navbarDropdown"，会导致ARIA属性关联错误，下拉触发异常
• 额外添加的下拉列表没有加flex对齐类，会在移动端换行，不会紧贴切换按钮右侧展示
• 没有设置下拉菜单的对齐方向，小屏设备下容易超出视口边界

完整修复后代码 #

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

  <!-- 固定显示的下拉，放在collapse外 -->
  <ul class="navbar-nav ml-auto ml-lg-0">
    <li class="nav-item dropdown">
      <!-- 修改为唯一id -->
      <a class="nav-link dropdown-toggle" href="#" id="fixedNavbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        NEW DROPDOWN
      </a>
      <!-- 加右对齐类避免小屏溢出 -->
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="fixedNavbarDropdown">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </li>
  </ul>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <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>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

核心修改说明 #

• 调整了固定下拉的代码位置，放在切换按钮和collapse之间，加ml-auto类在移动端自动左推，紧贴切换按钮右侧显示，ml-lg-0保证大屏下不会有多余左外边距
• 给固定下拉的触发元素修改了唯一idfixedNavbarDropdown，避免和原有下拉的id冲突
• 给固定下拉的菜单加了dropdown-menu-right类，保证下拉菜单右对齐，不会在小屏下超出视口

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