Angular4 和 Bootstrap 4 导航栏内联块不起作用答案

【问题标题】：Angular4 and Bootstrap 4 navbar inline-block not workingAngular4 和 Bootstrap 4 导航栏内联块不起作用
【发布时间】：2018-04-10 01:11:25
【问题描述】：

正如我在标题中所写，我试图从 Bootstrap 3 转到 4，在我更新后，我的导航栏坏了：

我没有做错任何事，我真的不明白为什么 inline-block 不再工作了。我尝试了我在 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>

感谢您的帮助。

【问题讨论】：

在问题中缺少的 CSS 中，将 display:inline-block; 添加到 .nav-item 类。如果不工作，例如使用开发工具看看是什么覆盖了你的减速。
这行不通！这就是我要求它的原因......
我认为是
不适用于 bootstrap 4 ！我尝试了所有 css 技巧，但没有任何反应。

标签： html css angular bootstrap-4

【解决方案1】：

我找到了，看来我需要将 navbar-nav 的属性显示从 inline-block 更改为 flex。

.navbar-nav {
  display: flex;
}

【讨论】：

更改 ul 的类。必须是