Angular4和Bootstrap 4导航栏内联块无法正常工作

Question

当我在标题中写道时，我试图从Bootstrap 3传递到4，在我更新后，我的导航栏被破坏了：

我没有做错什么，我真的不明白为什么内联块不再工作了。我尝试了在stackOverflow上找到的关于这个主题的所有内容，没有发生任何事情。

这是我的HTML代码：

<nav class="navbar navbar-inverse" role="navigation">
  <div class="center-block text-center">
   <button  class="collapse-btn" (click)="toggleMenu()">
     <i *ngIf="!isCollapsed()" class="fa fa-chevron-up" aria-hidden="true"></i>
     <i *ngIf="isCollapsed()" class="fa fa-chevron-down" aria-hidden="true"></i>
   </button>
  <ul class="navbar-nav">
   <li class="nav-item"><a class="nav-link" routerLink="/home">Progression</a></li>
   <li class="nav-item"><a class="nav-link" href="#">Activité pédagogique</a></li>
   <li class="nav-item"><a class="nav-link" href="#">Evalutation</a></li>
   <li class="nav-item"><a class="nav-link" href="#">Synthèse</a></li>
   <li class="nav-item"><a class="nav-link" href="#">Certification</a></li>
  </ul>
 </div>
</nav>

感谢您的帮助。

Answer 1

我发现它，似乎我需要将navbar-nav的属性显示从内联块更改为flex。

.navbar-nav {
  display: flex;
}