html - Bootstrap 4 移动导航栏不会崩溃

Question

问题是，当在移动设备上访问我的网站时，无法使用导航栏，因为所有链接都被隐藏了，当按下按钮取消隐藏它们时，没有任何反应。我正在使用 nginx、express、ejs 和 bootstrap 4。我已经完全按照 bootstrap 4 文档页面上的代码复制粘贴了代码。我拥有使 Bootstrap 工作所需的所有组件，包括 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>

在按钮中，data-target 指向“#navbarNav”，但后来折叠 div 的 id 设置为“navbarNavAltMarkup”。只需将“navbarNavAltMarkup”更改为“navbarNav”即可解决您的问题。