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 */ 
}