Angular2 самозагрузкой Navbar выглядит ужасно

Question

Я пытаюсь использовать Navbar Bootstrap в моем 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 */ 
}