ブートストラップのnavの右の部分4

Question

ng-bootstrap（Angular 4 + Bootstrap 4）には、左側（プルダウン）と右側（非プルダウン）の項目があります。私は&を右のコードに合わせることができましたが、右揃えのアイテムは上になり、色が違うので、CSSが正しく適用されていることを示唆しています。

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" aria-controls="appNavigation" [attr.aria-expanded]="!isCollapsed" aria-label="Toggle navigation" (click)="toggleMenu()"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">My App</a> 
    <div class="collapse navbar-collapse" id="appNavigation" [ngbCollapse]="isCollapsed"> 
    <div class="navbar-nav mr-auto"> 

     <div class="nav-item dropdown" ngbDropdown> 
     <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" ngbDropdownToggle> 
      Pulldown1 
     </a> 
     <div class="dropdown-menu" aria-labelledby="dropdownBasic1"> 
      <button class="dropdown-item">item1</button> 
      <button class="dropdown-item">item2</button> 
      <button class="dropdown-item">item3</button> 
      <button class="dropdown-item">item4</button> 
     </div> 
     </div> 
    </div> 
    <div class="navbar-nav nav-right"> 
     <div class="nav-item"> 
     <a href="#"><span class="glyphicon glyphicon-log-in"></span>Login</a> 
     </div> 
    </div> 
    </div> 
</nav> 

それが関係のケースでは、glyphiconがあまりにも不足している - それは無関係かもしれません。

「nav-right」の代わりに「justify-content-end」を試しましたが、違いはありません。 （いくつかの矛盾した文書を発見）

Answer 1

あなたはnav-linkクラスを追加することによって、あなたが欲しい書式設定を取得することができます：

<div class="navbar-nav nav-right"> 
    <div class="nav-item"> 
    <a class="nav-link" href="#">Login</a> 
    </div> 
</div> 

Glyphiconsがもはやブートストラップに含まれているので、あなたのような別のアイコンライブラリへの参照をいずれかに含めることはできませんフォントは素晴らしいですか、あなた自身のイメージを追加してください。