Angular中用*ngIf控制Bootstrap3 Navbar元素，inline样式不生效问题

我来帮你搞定这个问题！你遇到的核心原因是破坏了Bootstrap 3 Navbar的DOM结构：.navbar-nav的直接子元素必须是<li>标签，而你用<div>或<span>包裹这些<li>后，额外的容器元素打破了Bootstrap的默认布局规则（容器默认是块级元素，会占满整行，导致内部的<li>被迫换行）。

而[hidden]只是隐藏元素，不会移除DOM结构，所以原来的Navbar布局结构保持完整，元素就能正常在一行显示。

最佳解决方案：使用Angular的<ng-container> #

<ng-container>是Angular提供的虚拟容器标签，它不会被渲染成真实的DOM节点，既能帮你通过*ngIf分组控制元素的显示隐藏，又不会破坏Bootstrap的原有结构。

修改后的代码如下：

<!-- 未登录状态组 -->
<ng-container *ngIf="userNotloggedIn">
  <li>
    <form class="form-inline" [formGroup]="loginForm" (ngSubmit)="signInUser()" novalidate>
      <label for="username" class="control-label required sr-only">Username</label>
      <input type="text" id="username" class="form-control" placeholder="username" formControlName="userName" [ngClass]="validateField('userName')" required>
      <app-show-errors [control]="loginForm.controls.userName"></app-show-errors>
      <label for="password" class="control-label required sr-only">Password</label>
      <input type="password" id="password" class="form-control" placeholder="password" formControlName="password" [ngClass]="validateField('password')" required>
      <app-show-errors [control]="loginForm.controls.password"></app-show-errors>
      <button type="submit" id="login-button" class="btn content-div__button--blue btn-sm">Sign In</button>
    </form>
  </li>
  <li class="nav-item">
    <a class="nav-link" [routerLink]="signupRouterLink">Sign Up</a>
  </li>
</ng-container>

<!-- 已登录状态组 -->
<ng-container *ngIf="!userNotloggedIn">
  <li class="nav-item">
    <a [routerLink]="" (click)="onProfileClick()">My Profile</a>
  </li>
  <li class="nav-item">
    <a [routerLink]="" (click)="onSignoutClick()">Sign out</a>
  </li>
</ng-container>

为什么这个方案有效？ #

• <ng-container>不会生成任何真实的DOM元素，所以.navbar-nav的直接子元素还是<li>，完美符合Bootstrap 3的布局要求；
• 你依然可以通过单个*ngIf控制一组元素的显示隐藏，逻辑清晰，比给每个<li>单独加*ngIf更简洁；
• 保留了*ngIf的优势：不需要渲染隐藏状态的DOM元素，相比[hidden]更节省性能（尤其是复杂表单场景）。

额外小提示 #

如果你的登录表单在Navbar里还是有点挤，可以给表单元素加Bootstrap的间距类（比如margin-right相关的类），让布局更美观。

内容的提问来源于stack exchange，提问作者Manu Chadha