Bootstrap导航栏折叠不是折叠

Bootstrap导航栏折叠是指在较小的屏幕上，将导航栏的菜单项折叠起来，以节省空间并提供更好的用户体验。当屏幕宽度较小时，导航栏会自动折叠成一个按钮，点击按钮后展开菜单项。

Bootstrap是一个流行的前端开发框架，提供了丰富的组件和样式，使开发者能够快速构建响应式网站和应用程序。导航栏是Bootstrap中常用的组件之一，用于展示网站的主要导航链接。

折叠导航栏的优势在于：

响应式设计：折叠导航栏能够适应不同屏幕尺寸，提供更好的用户体验。
节省空间：在较小的屏幕上，将导航栏的菜单项折叠起来，可以节省页面空间，使页面更简洁。
提升可用性：通过折叠导航栏，用户可以更方便地浏览和访问网站的不同页面。

Bootstrap提供了一些相关的类和组件来实现导航栏的折叠功能。其中，.navbar类用于定义导航栏，.navbar-toggler类用于定义折叠按钮，.navbar-collapse类用于定义折叠内容。

以下是一些使用Bootstrap实现折叠导航栏的步骤：

引入Bootstrap的CSS和JS文件到HTML页面中。

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

在页面中添加导航栏的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="collapse"和data-target="#navbarNav"属性用于指定折叠内容的目标元素。