Bootstrap 4导航栏活动背景颜色

Question

在链接处于活动状态时，在Bootstrap 3导航栏中，链接背景颜色会更改为显示其活动链接。这似乎在Bootstrap 4中缺失。有没有办法显示这个或我是否需要覆盖活动类？

Bootstrap 3导航栏如下所示。您可以看到活动主页链接突出显示如何在Bootstrap 4中显示。

下面的角度5代码

  <div class="navbar-collapse" [ngbCollapse]="navbarCollapsed" id="navbarContent">
    <ul class="nav navbar-nav mr-auto">
      <li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
        <a class="nav-link" [routerLink]="['/home']" (click)="navbarCollapsed = true">HOME</a>
      </li>
      <li class="nav-item" [routerLinkActive]="['active']">
        <a class="nav-link" [routerLink]="['/page1']" (click)="navbarCollapsed = true">Page 1</a>
      </li>
    </ul>
  </div>

Answer 1

Bootstrap 4没有活动类的CSS。

所以你必须自己添加css

只需添加css，如

.active {
   background:#4FA9DC; color:#000;
}

Answer 2

[routerLinkActive]属性定义css类，一旦它与定义的路径匹配，它将附加到元素。

因此，在您的情况下，active类将附加到元素。您需要做的是在css文件中定义活动类，如评论中建议的@JavascriptHuppTechnologies。

Answer 3

正在应用.active类，但不可见，除非Navbar具有使用的navbar-dark或navbar-light类确定active链接的颜色......

• 使用navbar-dark获取较暗背景上的灯光/白色链接
• 使用navbar-light在浅色背景上显示深色/灰色链接

Answer 4

<nav class="nav nav-pills">
  <a class="nav-link" [routerLink]="['your_path1']" [routerLinkActive]="'active'">item1</a>
  <a class="nav-link" [routerLink]="['your_path2']" [routerLinkActive]="'active'">item2</a>
  <a class="nav-link" [routerLink]="['your_path3']" [routerLinkActive]="'active'">item3</a>
</nav>

使用 nav-pills 作为背景颜色并为 routerLinkActive 添加“active”类