Bootstrap 4：折叠导航栏时显示激活nav-item并隐藏navbar-brand

AI 小北

2026-5-21

解决Bootstrap折叠导航栏的显示需求

嘿，我懂你作为Bootstrap新手的困惑！其实导航栏折叠/展开时是有CSS类变化的，只是可能你没留意到，我来一步步帮你实现需求：折叠状态下隐藏navbar-brand，让当前激活的导航项显示在左侧。

核心思路

Bootstrap的导航栏折叠时，navbar-collapse容器会保留collapse类；当点击汉堡按钮展开菜单后，会额外添加show类。我们可以利用这个类的差异，结合自定义CSS来控制元素的显示和布局。

完整代码示例

HTML结构（以Bootstrap 4为例，Bootstrap 5只需替换`data-toggle`为`data-bs-toggle`、`data-target`为`data-bs-target`）

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <!-- 汉堡按钮 -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
    <span class="navbar-toggler-icon"></span>
  </button>
  <!-- 折叠容器 -->
  <div class="collapse navbar-collapse" id="navbarNav">
    <!-- 品牌标识 -->
    <a class="navbar-brand" href="#">MyBrand</a>
    <!-- 导航菜单 -->
    <ul class="navbar-nav">
      <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="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
    </ul>
  </div>
</nav>

自定义CSS

/* 折叠状态下隐藏品牌标识 */
.navbar-collapse.collapse:not(.show) .navbar-brand {
  display: none;
}

/* 折叠状态下，把激活的导航项推到左侧 */
.navbar-collapse.collapse:not(.show) .navbar-nav .nav-item.active {
  margin-right: auto;
}