最新的bootstrap在导航栏上没有正确反应

Question

我已安装Bootstrap v。：

 "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
    "bootstrap": "^4.0.0-beta"

我很想实施nav bar所以我创作了：

<nav class="navbar navbar-toggleable-md navbar-light bg-faded" *ngIf="!isLogged">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active" routerLinkActive="active current">
        <a class="nav-link" routerLink="/sign-up"><span class="sr-only">Sign Up</span></a>
      </li>
      <li class="nav-item active" routerLinkActive="active current">
        <a class="nav-link" routerLink="/login"><span class="sr-only">Login</span></a>
      </li>
    </ul>
  </div>
</nav>

虽然它显示我nav，但我看到的是：

而且这个按钮应该不会切换。当浏览器处于移动模式时，这种外观应该更多，但在上面的示例中并不是。

我想要实现的结果应该是第一个例子： example

Answer 1

如果您使用的是最新的Bootstrap v4 Beta，则需要将navbar-toggleable-md更改为navbar-expand-md

示例：

<nav class="navbar navbar-expand-md navbar-light bg-faded" *ngIf="!isLogged">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active" routerLinkActive="active current">
        <a class="nav-link" routerLink="/sign-up"><span class="sr-only">Sign Up</span></a>
      </li>
      <li class="nav-item active" routerLinkActive="active current">
        <a class="nav-link" routerLink="/login"><span class="sr-only">Login</span></a>
      </li>
    </ul>
  </div>
</nav>

原因是因为Bootstrap v4的alpha和beta版本之间的语法发生了变化。

以下是显示navbar-expand-** https://getbootstrap.com/docs/4.0/components/navbar/

的最新文档

编辑：根据您在评论中的其他问题。 您不会在任何屏幕上看到注册和登录文本，因为您已为它们分配了sr-only类，这使它们只能在屏幕阅读器上查看。删除sr-only类以查看文本。

您还需要将bg-faded更改为bg-light。

<nav class="navbar navbar-expand-md navbar-light bg-light" *ngIf="!isLogged">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active" routerLinkActive="active current">
        <a class="nav-link" routerLink="/sign-up"><span class="">Sign Up</span></a>
      </li>
      <li class="nav-item active" routerLinkActive="active current">
        <a class="nav-link" routerLink="/login"><span class="">Login</span></a>
      </li>
    </ul>
  </div>
</nav>