Angular CLI：导航栏不会折叠

Question

我正在使用 Angular-CLI 和 Node.Js 构建一个 SPA 应用程序，使用 WebStorm，但我不明白为什么我的导航栏不会崩溃。 当页面足够小时，导航项就会消失。

我没有使用 navbar-expand 类（而是使用不应防止折叠的 navbar-expand-sm），除此之外，我没有发现任何应该导致此问题的内容。

我的 navbar.component.html：

<nav class="navbar navbar-expand-sm navbar-brown fixed-top">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav mx-auto">
      <li class="nav-item">
        <a class="nav-link" (click)="clickedHome()">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" (click)="clickedForums()">Forums</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" (click)="clickedMyZone()">MyZone</a>
      </li>
    </ul>
  </div>
</nav>

<div class="jumbotron text-center" id="primary_jumbotron_display">
  <div id="primaryDisplayBorder">
    <div id="primaryDisplayContent">{{primaryDisplayBorderTitle}}</div>
    <p>{{primaryDisplayBorderContent}}</p>
  </div>
</div>

我的 navbar.component.css：

@import url(//db.onlinewebfonts.com/c/460e8698563db983434874f8f371a7d1?family=Museo);

.jumbotron {
  height: 40vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#primary_jumbotron_display {
  background-image: url('client/assets/images/FriendLancer_banner.jpg');
  font-family: Museo;
  font-size: x-large;
  background-size: cover;
  align-content: center;
  color: saddlebrown;
  margin-bottom: 0;
}

#primaryDisplayContent {
  font-size: 7ex;
}

.navbar-brown {
  background-color: saddlebrown !important;
  box-shadow: #222222;
}

.navbar {
  -webkit-box-shadow: 0 8px 6px -6px black;
  -moz-box-shadow: 0 8px 6px -6px black;
  box-shadow: 0 8px 6px -6px black;
}

.navbar-nav {
  font-family: Museo;
  font-size: medium;
}

.navbar-nav > li {
  padding-left: 15px;
  padding-right: 15px;
}

.nav-item {
  transition: all 0.3s ease;
}

.navbar-nav a {
  color: silver;
}

.navbar-nav a:hover {
  color: saddlebrown;
  letter-spacing: 1.3px;
  background-image: linear-gradient(to right, sandybrown, rosybrown);
}

任何帮助，将不胜感激。