Bootstrap 4 导航栏活动背景颜色答案

【问题标题】：Bootstrap 4 navbar active backgroup colorBootstrap 4 导航栏活动背景颜色
【发布时间】：2018-10-24 02:08:48
【问题描述】：

在 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>

【问题讨论】：

尝试检查这个问题，如果它适合你stackoverflow.com/questions/46172769/…
像.active { background:#4FA9DC; color:#000;}这样简单地添加css
@NanditaAroraSharma 谢谢，但我已经在 Angular 5 上。链接也显示为活动的。它只是缺少的背景颜色。
是的，刚刚检查过，似乎 bootstrap 删除了 navbar 中活动类的背景颜色样式。您可以使用@JavascriptHuppTechnologies 答案
@JavascriptHuppTechnologies 必须按照您所说的添加 css。如果您想将其添加为 aswer，我可以将其标记为正确的。

标签： angular bootstrap-4 navbar ng-bootstrap

【解决方案1】：

Bootstrap 4 没有用于活动类的 css。

所以你必须自己添加css

像这样简单地添加 css

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

正在应用 .active 类，但它不会可见，除非导航栏具有用于确定 @987654324 的颜色的 navbar-dark 或 navbar-light 类@链接...

使用navbar-dark 在较暗的背景上显示浅色/白色链接
使用navbar-light 在浅色背景上添加深色/灰色链接

【讨论】：

我正在使用导航栏灯。我的问题是关于背景样式，如屏幕截图所示。那是缺失的，但应用了活动类。
Bootstrap 4 不应用背景，所以添加自定义 CSS

【解决方案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'

【讨论】：