web-dev-qa-db-ja.com

Bootstrap 4navbarアクティブな背景色

リンクがアクティブな場合のBootstrap 3ナビゲーションバーでは、リンクの背景色が変更され、アクティブなリンクであることを示します。これはBootstrap 4.これを表示する方法はありますか、それともアクティブクラスをオーバーライドする必要がありますか？

Bootstrap 3ナビゲーションバーを以下に示します。アクティブなホームリンクが強調表示されているのがわかります。これをBootstrap 4で表示するにはどうすればよいですか。

enter image description here

以下の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>
angularbootstrap-4navbarng-bootstrap
5
BeesNees

Bootstrap 4には、アクティブクラスのcssがありません。

だからあなたは自分でCSSを追加する必要があります

次のようなCSSを追加するだけです

.active {
   background:#4FA9DC; color:#000;
}
1
Javascript Hupp Technologies

.activeクラスが適用されていますが、ナビゲーションバーに色を決定するために使用したnavbar-darkまたはnavbar-lightクラスがない限り、表示されませんactiveリンク.。

  • 暗い背景の明るい/白いリンクにはnavbar-darkを使用します
  • 明るい背景の暗い/灰色のリンクにはnavbar-lightを使用します
0
Codeply-er

[routerLinkActive]プロパティは、定義されたルートと一致すると要素に追加されるcssクラスを定義します。

したがって、あなたの場合、activeクラスが要素に追加されます。コメントで提案されている@JavascriptHuppTechnologiesのように、cssファイルでアクティブクラスを定義する必要があります。

0
filipbarak