Question

我在ng-bootstrap（Angular 4 + Bootstrap 4）中创建一个导航栏，左边有一些项目（下拉），右边有一些项目（非下拉）。我已经离开了＆amp;右对齐下面的代码，但右对齐项目更高，颜色不同，表明正在应用一些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也会丢失 - 但这可能是不相关的。

我也试过“justify-content-end”而不是“nav-right”，但没有区别。（找到一些矛盾的文件）

Answer 1

您可以通过添加nav-link类来获取所需的格式：

<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中导航的右侧部分

1 个答案: