Question

已经问过类似的问题，但是有很长的历史了，实际上没有一个对我有用。问题：尽管菜单上的最后一个元素应用了以下样式，但仍然无法正确显示：

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>

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

Answer 1

Angular和Bootstrap导航栏不能真正一起工作。以这个家伙为例，他使用了nav-right。但是他还使用折叠模块实现了导航栏。

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

来源： How can I using Bootstrap navbar in ngx-bootstrap for Angular 5?

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

1 个答案: