Bootstrap4导航栏始终折叠

Question

出于某种原因，一旦我更新了角度，我已经开始使用完全相同的代码...这里是我的导航栏代码

<nav *ngIf="authService.isLoggedin" class="navbar navbar-toggleable-md navbar-light bg-faded">
<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>
<a class="navbar-brand" routerLink="home">Mavis</a>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item" *ngIf="authService.isAdmin">
            <a class="nav-link" routerLink="settings">Settings</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" routerLink="home">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" routerLink="session">Session</a>
        </li>
    </ul>
    <div class="nav navbar-nav navbar-right">
        <button (click)="logout()" class="navbar-brand"><strong>Logout</strong></button>
    </div>
</div>

我的问题是导航栏总是折叠，无论屏幕的宽度如何，这在手机上看起来很棒，但在桌面上看起来不是很好。我确定我正确地设置了我的角度2项目的bootstrap ..但是为了确保，我将这些添加到我的'angular-cli.json'文件中

"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/popper.js/dist/umd/popper.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ],