Bootstrap 4导航栏Active背景色缺失，如何实现Bootstrap 3同款高亮？

好问题！Bootstrap 4确实对Navbar的active状态样式做了调整——默认不再像Bootstrap 3那样给活跃链接添加背景色高亮，这是框架设计风格的迭代，并非功能缺失。不过我们完全可以通过简单的自定义CSS，轻松找回你想要的高亮效果，甚至能适配Bootstrap 4的设计风格。

第一步：确认你的Angular路由绑定是正确的 #

先看你提供的代码，已经在<li>标签上正确绑定了routerLinkActive：

<li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
  <a class="nav-link" [routerLink]="['/home']" (click)="navbarCollapsed = true">HOME</a>
</li>

这部分没问题！Angular会在当前路由匹配时自动给对应的<li>添加active类，接下来只需要给这个active状态加上背景样式就行。

第二步：自定义CSS实现背景高亮 #

根据Bootstrap 4的结构，我们需要定位到active类下的nav-link元素，添加背景色样式。下面提供几种常见的方案：

方案1：贴近Bootstrap 3的默认高亮风格

如果你想还原Bootstrap 3的深蓝色高亮效果，可以用这段CSS：

.navbar-nav .nav-item.active .nav-link {
  background-color: #337ab7; /* Bootstrap 3默认navbar高亮色 */
  color: #ffffff;
  border-radius: 4px; /* 可选：添加圆角贴合Bootstrap风格 */
}

方案2：适配Bootstrap 4的浅色Navbar风格

如果你的Navbar是浅色（比如默认的navbar-light bg-light），可以用更柔和的高亮色：

.navbar-nav .nav-item.active .nav-link {
  background-color: #e9ecef;
  color: #495057;
  border-radius: .25rem; /* Bootstrap 4默认圆角 */
}

方案3：适配深色Navbar风格

如果用的是深色Navbar（比如navbar-dark bg-dark），可以用半透明的浅色背景保证可读性：

.navbar-dark .navbar-nav .nav-item.active .nav-link {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

可选调整：直接给<a>标签绑定routerLinkActive #

如果你习惯把active类直接加到<a>标签上，也可以修改代码：

<li class="nav-item">
  <a class="nav-link" 
     [routerLink]="['/home']" 
     [routerLinkActive]="['active']" 
     [routerLinkActiveOptions]="{exact:true}"
     (click)="navbarCollapsed = true">HOME</a>
</li>

对应的CSS选择器也要改成：

.navbar-nav .nav-link.active {
  /* 这里放你想要的背景样式 */
}

这样调整后，你的Navbar就能像Bootstrap 3那样，在链接处于active状态时显示背景高亮啦！

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