时间戳

首页 > 解决方案 > Angular5 和 Bootstrap4 - 无法将最后一个菜单项向右对齐

angular - Angular5 和 Bootstrap4 - 无法将最后一个菜单项向右对齐

问题描述

已经问过类似的问题，但是已经很老了，没有一个真正适合我。问题：尽管对其应用了以下样式，但菜单的最后一个元素仍然不正确：

1 文本对齐：右；浮动：无；2 向右拉 3 向右浮动

我的菜单代码如下所示：

<nav class="nav navbar-toggler">
  <div class="navbar-brand">
    <img src="../../../assets/banner-1.png">
  </div>
  <h1 class="navbar-text h1">{{ title }}</h1>
</nav>

<nav class="nav nav-header">
  <div class="form-inline container">
    <a class="nav-item nav-link menu-item active" href="#">Home <span class="sr-only">(current)</span></a>
    <a class="nav-item nav-link menu-item" routerLink="/app-registrations-browser">Applications</a>
    <a class="nav-item nav-link menu-item" routerLink="/users">Users</a>
    <a class="nav-item nav-link menu-item" routerLink="/inspections">Inspections</a>
    <a class="nav-item nav-link menu-item" routerLink="/cpe">CPE</a>
    <a class="nav-item nav-link menu-item" routerLink="/reports">Reports</a>
    <a class="nav-item nav-link menu-item" routerLink="/help">Help</a>

    <a class="nav-item nav-link" style="color: ghostwhite; text-align: right; float: none;">Logged User</a>
  </div>
</nav>

还有其他方法可以强制最后一项正确吗？

标签： angularbootstrap-4angular5

解决方案

Angular 和 Bootstrap 导航栏并不能真正协同工作。离开这个家伙的例子，他使用了 nav-right。但他也使用折叠模块实现了导航栏。

https://stackblitz.com/edit/ngx-bootstrap-anjadq

资料来源： 如何在 Angular 5 的 ngx-bootstrap 中使用 Bootstrap 导航栏？

推荐阅读