bootstrap 4 中导航的右侧部分

Question

我正在 ng-bootstrap (Angular 4 + Bootstrap 4) 中创建一个导航栏，其中一些项目在左侧（下拉列表）和右侧（a非下拉）。我已经能够与下面的代码左右对齐，但是右对齐的项目更高并且颜色不同，这表明一些 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>

万一它是相关的，字形也丢失了 - 但这可能是无关的。

我也试过 "justify-content-end" 而不是 "nav-right" 但没有区别。（发现一些矛盾的文档）

Answer 1

您可以通过添加 nav-link class:

来获得您想要的格式

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

由于 Glyphicons 不再包含在 Bootstrap 中，您可以包含对另一个图标库（如 Font Awesome）的引用或添加您自己的图像。

bootstrap 4 中导航的右侧部分

Right part of nav in bootstrap 4

bootstrap-4

ng-bootstrap

angular