Bootstrap 5导航栏：实现主菜单与搜索菜单不同切换断点

要实现主菜单仅在<992px时可切换，搜索菜单全尺寸可切换，需要调整Bootstrap的默认响应式样式和组件类，具体实现如下：

关键修改逻辑 #

1. 强制显示搜索切换按钮：Bootstrap的navbar-expand-lg会在≥992px时隐藏所有navbar-toggler，需自定义CSS让搜索按钮始终可见。
2. 锁定搜索区域默认折叠状态：移除搜索区域的navbar-collapse类，避免其在大屏幕下自动展开，确保仅通过点击toggle触发显示。
3. 优化大屏搜索布局：添加媒体查询，让搜索输入框在大屏幕下从toggle按钮下方弹出，不破坏导航栏原有结构。

修改后的完整代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
/* 让搜索切换按钮全尺寸可见 */
.search-toggler {
    display: flex !important;
    border: none;
    color: white;
}

/* 确保搜索区域默认隐藏，仅点击toggle后显示 */
#navbarSearchMenu {
    display: none;
}

#navbarSearchMenu.show {
    display: block;
}

/* 大屏幕下搜索区域的弹出式布局 */
@media (min-width: 992px) {
    #navbarSearchMenu {
        position: absolute;
        right: 1rem;
        top: 100%;
        width: 280px;
        background-color: #ffffff;
        padding: 0.75rem;
        border-radius: 0.5rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
}
</style>

<nav class="navbar navbar-expand-lg bg-primary fixed-top">
  <div class="container">
    <!-- 主菜单toggle，仅在<992px显示 -->
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarMainMenu" aria-controls="navbarMainMenu" aria-expanded="false" aria-label="Toggle main menu">
        <i class="fas fa-bars"></i>
    </button>
    
    <a class="navbar-brand" href="#">Company</a>
    
    <!-- 主菜单offcanvas -->
    <div class="offcanvas offcanvas-start offcanvas-menu" tabindex="-1" id="navbarMainMenu" aria-labelledby="navbarMainMenu">
      <div class="offcanvas-header">
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      
      <div class="offcanvas-body">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">Link 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link 2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link 3</a>
          </li>
        </ul>
      </div>
    </div>
    
    <!-- 搜索toggle，全尺寸显示 -->
    <button class="navbar-toggler search-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearchMenu" aria-controls="navbarSearchMenu" aria-expanded="false" aria-label="Toggle search menu">
      <i class="fas fa-search"></i>
    </button>
    
    <!-- 搜索区域，默认折叠 -->
    <div class="collapse" id="navbarSearchMenu">
      <div class="input-group">
        <input type="text" class="form-control form-control-sm" placeholder="搜索" />
        <span class="input-group-text">搜索</span>
      </div>
    </div>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

效果说明 #

• 主菜单保持原有逻辑：navbar-expand-lg自动在<992px时显示汉堡按钮，点击打开offcanvas菜单。
• 搜索按钮通过自定义CSS强制全尺寸显示，点击后借助Bootstrap的collapse组件切换搜索输入框的可见状态。
• 大屏幕下搜索区域采用绝对定位弹出，避免挤压导航栏其他元素，提升交互体验。

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