Bootstrap 4移动导航栏不会崩溃

Question

问题在于，在移动设备上访问我的网站时，无法使用导航栏，因为所有链接都被隐藏了，而按按钮取消隐藏它们时，则什么也没有发生。 我正在使用nginx，express，ejs和bootstrap4。我复制的代码与bootstrap 4文档页面上的代码完全相同。我具有使引导程序正常工作的所有必需组件，包括popper.js，开发人员控制台中没有问题，所有资源都可以正常加载。 这是我的网站https://camelliott.tk

的链接

Answer 1

据我所知，您将按钮指向了错误的目标，因此不会加载任何东西。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Camelliott</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    // Actual Nav Here
  </div>
</nav>

在该按钮中，数据目标指向“ #navbarNav”，但随后折叠div的ID设置为“ navbarNavAltMarkup”。只需将“ navbarNavAltMarkup”更改为“ navbarNav”即可解决您的问题。