Bootstrap 4导航栏活动状态背景颜色

Question

在Bootstrap 3中，当链接处于活动状态时，链接的背景颜色会更改以显示其为活动链接。在Bootstrap 4中似乎缺少了这一点。是否有一种方法可以显示这个或者我需要覆盖活动类？

下面是Bootstrap 3导航栏。您可以看到活动主页链接已突出显示。如何在Bootstrap 4中显示这个？

下面是 Angular 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>

- BeesNees

---

请尝试检查此问题是否适用于您 https://dev59.com/RlYO5IYBdhLWcg3wN--f - Nandita Sharma

只需添加类似于.active { background:#4FA9DC; color:#000;}的CSS即可。 - Javascript Hupp Technologies

@NanditaAroraSharma 谢谢，但我已经在使用Angular 5了。此外，链接显示为活动状态。只是背景颜色缺失了。 - BeesNees

是的，我刚刚检查了一下，似乎Bootstrap在导航栏中删除了活动类的背景颜色样式。您可以使用@JavascriptHuppTechnologies的答案。 - Nandita Sharma

@JavascriptHuppTechnologies必须按照您的要求添加CSS。如果您想将其作为答案添加，我可以将其标记为正确答案。 - BeesNees

Answer 1

Bootstrap 4 没有针对 active class 的 css。

因此，您需要自行添加 css。

只需像这样添加 css：

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

- Javascript Hupp Technologies

Answer 2

[routerLinkActive] 属性定义了匹配到指定路由时将附加到元素的 css 类。

因此，在您的情况下，active 类将被附加到该元素上。您需要做的是在您的 css 文件中定义一个 active 类，就像 @JavascriptHuppTechnologies 在评论中建议的那样。

- filipbarak

Answer 3

应用了.active类，但除非导航栏具有navbar-dark或navbar-light类，否则它将不可见，这些类用于确定active链接的颜色...

• 在较暗的背景上使用navbar-dark以获得浅色/白色链接
• 在较亮的背景上使用navbar-light以获得深色/灰色链接

- Carol Skelly

---

我正在使用navbar-light。我的问题在于背景样式，如截图所示。这个样式缺失了，但是active类已经应用了。 - BeesNees

Bootstrap 4没有应用背景，因此需要添加自定义CSS。 - Carol Skelly

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' 类。

- Thomas Valan