调整浏览器窗口大小时不显示导航栏下拉列表

Question

我们有一个在Angular 2和bootstrap中制作的导航栏，它应该是响应式的。显示一个按钮，但单击时没有任何功能。这是出现的按钮图像： http://i.imgur.com/MtIxSOc.png

这是我们标题的代码：

<!-- Static navbar -->
<div class="container logores">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
        </button>
        <a class="navbar-brand" href="#">
          <img class="img-responsive"
         src="/assets/logo.png">
        </a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li [ngClass]="{active: frivilligActive}" (click)="onSelect('frivillige')"><a href="#"><i class="fa fa-female" aria-hidden="true"></i> Frivillige</a></li>
          <li [ngClass]="{active: laugActive}" (click)="onSelect('laug')"><a href="#"><i class="fa fa-users" aria-hidden="true"></i> Laug</a></li>
          <li [ngClass]="{active: crudFrivilligActive}" (click)="onSelect('crudfrivillige')"><a href="#"><i class="fa fa-database" aria-hidden="true"></i> CRUD Frivillige</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </nav>
</div>

页面上检查的元素包含以下代码：

<button _ngcontent-c1="" aria-controls="navbar" aria-expanded="false" 
class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse" 
type="button">
          <span _ngcontent-c1="" class="sr-only">Toggle navigation</span>
        </button>