Angular2ブートストラップナビゲーションバーはひどい

Question

私はangular2アプリでブートストラップのナビゲーションバーを使用しようとしていますが見えますが、項目はひどい見えます：中（私は項目のいずれかに滞在する場合

は、彼らはとてもよく似合います..私は、最新のブートストラップと角度を使用しています

コード：絵マウス）について、リンクの上にある

<div class="container" *ngIf="checkLocalStorage()"> 
<nav class="navbar navbar-fixed-top navbar-inverse"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand">Scrum Dashboard</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li><a routerLink="/">Home</a></li> 
       <li><a routerLink="/test">About</a></li> 
      </ul> 
      <form class="navbar-form navbar-right"> 
       <button type="submit" class="btn btn-lg btn-danger" (click)="logout()">Sign out</button> 
      </form> 
     </div> 
    </div> 
</nav> 

助けてください！ 詳しい情報が必要な場合は、私が提供します。

Answer 1

これは単なるブートストラップスタイルを無効にする問題です。ブラウザで、=>を右クリックし、スタイルを変更するアイテムを「検査」して、不要なスタイルを作成するクラスを確認します。次に、スタイルシートで、同じクラス、属性、または他のセレクタを作成し、目的のスタイルを追加します。追加：：へのあなたのセレクタに状態をホバーブートストラップスタイルシート

例

bootstrap.css

.nav navbar-nav > li > a { 
    background: white; /* Don't change it here */ 
    color: grey; 
} 

スタイルシート

.nav navbar-nav > li > a { 
    background: black; /* override it here */ 
    color: white; 
} 

*ノートの後にそのスタイルシートの負荷を確認してください要素上にマウスを置いたときのスタイルを変更します。

.nav navbar-nav > li > a:hover { 
    background: blue; /* turns blue when hovering */ 
}