导航组件 Vue 中的引导导航栏显示不正确答案

【问题标题】：Bootstrap Navbar Displays Incorrect in Nav Component Vue导航组件 Vue 中的引导导航栏显示不正确
【发布时间】：2021-03-21 19:30:08
【问题描述】：

我的 Vue 组件中显示的 Bootstrap 导航栏有问题。它当前显示为堆叠的灰色按钮。几乎就像它认为它在小型设备上一样。

导航栏的完整代码可以在here 找到。我不确定我错过了什么，任何帮助将不胜感激。

【问题讨论】：

标签： html css twitter-bootstrap vue.js

【解决方案1】：

您使用的是哪个版本的引导程序？

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

在 bootstrap 4.5 中，navbar-toggler button 与您的不同。然后，要根据导航栏样式更改按钮的图标颜色（以查看它），如果您的导航栏清晰，请添加navbar-light，如果导航栏很暗，请添加navbar-dark。

【讨论】：

您的回答是正确的。我正在查看 3.3 版而不是 4.5 版的文档。感谢您指出这一点。

【解决方案2】：

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

【讨论】：