导航栏收拢切换不起作用(Bootstrap5)

导航栏收拢切换不起作用(Bootstrap 5)

问题描述：当使用Bootstrap 5创建一个导航栏，并且尝试在较小的屏幕上将其收拢起来时，却发现切换按钮无法正常工作。

解决方案：要解决导航栏收拢切换不起作用的问题，可以采取以下步骤：

检查所使用的Bootstrap版本：确认使用的是Bootstrap 5版本，因为在Bootstrap 5中，导航栏的组件结构发生了变化，其中移除了旧版本中常用的jQuery依赖。
引入Bootstrap相关文件：确保在项目中正确引入了Bootstrap 5所需的CSS和JavaScript文件。可以通过CDN方式引入或者从官方网站下载相应的文件。
检查HTML结构：确认导航栏的HTML结构正确无误。导航栏应该包含一个具有navbar-toggler类的按钮，并且具有data-bs-toggle和data-bs-target属性，用于指定要切换的导航栏目标。确保目标元素的ID与data-bs-target属性中指定的值相匹配。

示例代码如下所示：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 3</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

确保正确加载Bootstrap相关脚本：在页面中引入Bootstrap的JavaScript文件，以确保相应的交互功能生效。可以将其放置在<body>结束标签前或者在页面的头部部分。

示例代码如下所示：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Navbar Issue</title>
  <!-- 引入Bootstrap CSS文件 -->
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
  <!-- 导航栏HTML结构 -->
  
  <!-- 引入Bootstrap JavaScript文件 -->
  <script src="bootstrap.min.js"></script>
</body>
</html>