Bootstrap 4折叠的导航栏不工作

Bootstrap 4是一种流行的前端开发框架，它提供了丰富的组件和样式，可以帮助开发人员快速构建响应式网站和应用程序。折叠的导航栏是Bootstrap 4中常用的组件之一，它可以在小屏幕设备上自动折叠和展开导航菜单，提供更好的用户体验。

如果Bootstrap 4的折叠导航栏不工作，可能有以下几个原因和解决方法：

引入Bootstrap库文件错误：首先要确保正确引入了Bootstrap的CSS和JavaScript文件。可以通过在HTML文件中添加以下代码来引入Bootstrap库文件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>

缺少必要的HTML结构和类名：折叠导航栏需要特定的HTML结构和类名来正常工作。确保你的HTML代码中包含以下结构：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</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="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

确保navbar-toggler按钮的data-toggle属性和data-target属性与折叠内容的id匹配。

缺少必要的JavaScript依赖：Bootstrap的折叠导航栏需要依赖jQuery和Popper.js。确保在引入Bootstrap的JavaScript文件之前，正确引入了这两个库文件。可以通过以下代码来引入：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.6/umd/popper.min.js"></script>