Bootstrap导航栏不会在移动设备中折叠答案

【问题标题】：Bootstrap nav bar not collapsing in mobileBootstrap导航栏不会在移动设备中折叠
【发布时间】：2021-08-25 15:55:55
【问题描述】：

当我使用移动设备或最小化窗口时，我无法折叠我的投资组合网站上的导航栏。我从 getbootstrap navbar 部分修改了这段代码。任何帮助表示赞赏！

这是我的代码：

<!--NAVIGATION BAR-->
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#"</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav navbar-right">
        <a class="nav-item nav-link active" href="kulykarakoc.github.io">Home <span class="sr-only"></span></a>
        <a class="nav-item nav-link" href="#about">About Me</a>
        <a class="nav-item nav-link" href="#projects">Projects</a>
        <a class="nav-item nav-link" href="#contact">Contact</a>
      </div>
    </div>
</nav>

【问题讨论】：

标签： twitter-bootstrap navbar

【解决方案1】：

我不确定 Bootstrap 的哪个版本，所以我假设您使用的是 Bootstrap v4 或 Bootstrap v5。

如果您使用的是 Bootstrap v5，请将按钮属性 data-toggle 和 data-target 更改为 data-bs-toggle 和 data-bs-target：

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" 
data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" 
aria-expanded="false" aria-label="Toggle navigation">

您提供的代码在使用 Bootstrap v4 时有效。如果您使用的是 Bootstrap v4，但仍然无法切换导航栏，请确保您的项目设置正确。

【讨论】：