如何使用Bootstrap实现小屏幕下导航栏转为下拉菜单？

要让导航栏在小屏幕下自动转为下拉菜单，你需要补全Bootstrap响应式导航栏的完整结构，以下是修改后的可直接使用的代码：

<!-- 引入Bootstrap样式（放在页面<head>标签内） -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <!-- 导航栏标题/品牌 -->
    <span class="navbar-brand">Midterm Project</span>
    <!-- 小屏触发按钮（汉堡图标） -->
    <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 href="index.html" class="nav-link">
            <h2 class="nav-font2">Welcome Page</h2>
          </a>
        </li>
        <li class="nav-item">
          <a href="about.html" class="nav-link">
            <h2 class="nav-font2">About</h2>
          </a>
        </li>
        <li class="nav-item">
          <a href="characters.html" class="nav-link">
            <h2 class="nav-font2">Characters</h2>
          </a>
        </li>
        <li class="nav-item">
          <a href="story.html" class="nav-link">
            <h2 class="nav-font2">Story</h2>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- 引入Bootstrap交互脚本（放在页面</body>标签前） -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

核心细节说明： #

• navbar-expand-lg：控制折叠断点——屏幕宽度小于992px时，导航栏自动折叠为下拉菜单；若要在更小屏幕（比如768px）触发折叠，替换为navbar-expand-md即可。
• navbar-toggler：小屏状态下显示的汉堡按钮，点击后通过data-bs-target关联的容器实现菜单展开/收起。
• collapse navbar-collapse：包裹导航项的容器，是实现折叠效果的核心结构。
• 必须引入Bootstrap的CSS和JS资源，否则折叠交互功能无法正常生效。

内容的提问来源于stack exchange，提问作者Neunde