如何实现Bootstrap响应式导航栏：大屏下拉，小屏汉堡图标整合所有项

核心办法 #

利用Bootstrap自带的响应式类，把“显示更多”里的选项分成两套：大屏时藏在下拉菜单里，中屏及以下直接放到汉堡展开的菜单里，同时把原“显示更多”按钮在小屏时隐藏掉。

直接可用的代码示例 #

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">你的品牌</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
      <!-- 固定的3个导航链接 -->
      <ul class="navbar-nav me-auto mb-2 mb-md-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">产品</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">关于我们</a>
        </li>
        <!-- 仅大屏显示的下拉菜单 -->
        <li class="nav-item dropdown d-none d-md-block">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            显示更多
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">设置</a></li>
            <li><a class="dropdown-item" href="#">帮助中心</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">退出登录</a></li>
          </ul>
        </li>
      </ul>
      <!-- 仅中屏及以下显示的额外链接 -->
      <ul class="navbar-nav d-md-none">
        <li class="nav-item">
          <a class="nav-link" href="#">设置</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">帮助中心</a>
        </li>
        <li class="nav-item">
          <hr class="dropdown-divider">
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">退出登录</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

关键细节 #

• d-none d-md-block：让原“显示更多”下拉按钮仅在≥768px的大屏显示，小屏自动隐藏。
• d-md-none：让额外的导航项列表仅在中屏及以下显示，大屏自动隐藏。
• 设置完成后，点击汉堡图标会直接展开所有导航项（含原下拉内的功能项），无需二次点击“显示更多”。

避免代码重复的小技巧 #

如果不想重复编写下拉内的选项，可以用JS动态复制元素：

// 复制下拉菜单里的项到小屏菜单
const dropdownItems = document.querySelector('.dropdown-menu').children;
const mobileMenu = document.querySelector('.d-md-none');

Array.from(dropdownItems).forEach(item => {
  const copyItem = item.cloneNode(true);
  // 把dropdown-item样式改为nav-link，保持小屏样式统一
  if (copyItem.classList.contains('dropdown-item')) {
    copyItem.classList.remove('dropdown-item');
    copyItem.classList.add('nav-link');
    copyItem.parentElement.classList.add('nav-item');
  }
  mobileMenu.appendChild(copyItem);
});

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