Bootstrap 4 导航栏活动背景颜色

Question

在 Bootstrap 3 导航栏中，当 link 处于活动状态时，link 背景颜色会更改以显示其处于活动状态 link。这似乎在 Bootstrap 中丢失了 4. 有没有办法显示这个或者我是否需要覆盖活动 class？

Bootstrap 3 导航栏如下所示。您可以看到活动主页 link 已突出显示 How do I show this in Bootstrap 4.

下面的angular5代码

  <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

[routerLinkActive] 属性定义了 css class 一旦它匹配定义的路由将被附加到元素。

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

Answer 2

正在应用 .active class，但 将不可见 ，除非 Navbar 有 navbar-dark 或 navbar-light classes 用于确定 active 链接的颜色...

使用 navbar-dark 在较暗的背景上创建 light/white 链接
在浅色背景上使用 navbar-light 作为 dark/gray 链接

Answer 3

Bootstrap 4 没有 css 活动 class.

所以你必须自己添加css

只需添加 css 喜欢

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

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 添加 class 'active'

Bootstrap 4 导航栏活动背景颜色

Bootstrap 4 navbar active backgroup color

navbar

bootstrap-4

ng-bootstrap

angular