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

我们有一个由Angular 2和bootstrap制成的导航条，它应该是灵敏的。将显示一个按钮，但单击时没有任何功能。下面是显示的按钮的图像：

这是标题的代码：

<!-- 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>

切换导航

是否添加了bootstrap.js？您的代码工作正常。是的，已添加引导，代码本身工作正常。