引导程序中导航的右侧部分4

我在ng-bootstrap（Angular 4 + Bootstrap 4）中创建了一个导航条，其中一些项目位于左侧（下拉菜单），另一些位于右侧（非下拉菜单）。我已经能够将&与下面的代码对齐，但右对齐的项目更高并且颜色不同，这表明某些CSS正在正确应用。引导程序中导航的右侧部分4

<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”，但没有区别。（发现了一些矛盾的文档）

来源

2017-08-07 TSG

[Glyphicons不包括在Bootstrap 4中]（https://stackoverflow.com/questions/32612690/bootstrap-4-glyphicons-migration） – HaveSpacesuit

在boostrap 4中有什么等价物？ – TSG

您可以通过添加nav-link类得到你想要的格式：

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

由于Glyphicons不再包含在引导，您可以包括到另一个图标库就像一个参考字体真棒或添加您自己的图像。

来源

2017-08-07 21:21:30 HaveSpacesuit

引导程序中导航的右侧部分4

回答

相关问题