如何将Bootstrap3可折叠导航栏适配为Bootstrap5小屏折叠版

迁移目标 #

严格对齐原导航栏的全部交互表现：

• 导航栏固定停靠在视口顶部
• 屏幕宽度低于预设阈值时，自动收起横向导航项，将内容收纳进折叠菜单
• 小屏状态下自动隐藏独立操作按钮，仅保留折叠触发控件

关键API与类名替换规则 #

Bootstrap 5 对导航组件做了非向后兼容的调整，需逐一替换以下内容以避免功能失效：

• 固定定位类：原 navbar-fixed-top 替换为 fixed-top
• 折叠触发属性：原 jQuery 绑定的 data-toggle、data-target 替换为原生 JS 支持的 data-bs-toggle、data-bs-target
• 折叠按钮结构：原手动编写的三横线 .icon-bar 结构，替换为内置的 .navbar-toggler-icon 统一样式
• 布局类：原用于导航靠右对齐的浮动类 navbar-right，替换为弹性布局类 ms-auto
• 响应式显隐：原自定义媒体查询实现的“小屏隐藏操作按钮”，替换为内置响应式工具类 d-none d-lg-inline-block，匹配原交互的触发阈值
• 断点阈值调整：折叠触发的屏幕宽度可通过navbar-expand-{断点值}的类名自由配置，如原逻辑在768px宽度触发折叠，将类名中的lg替换为md，同时把操作按钮的响应式类d-none d-lg-inline-block替换为d-none d-md-inline-block即可完全对齐原交互的触发时机

可直接复用的完整适配代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定顶部可折叠导航栏</title>
  <!-- Bootstrap 5 CSS 引入 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* 抵消固定导航栏的遮挡偏移，与原Bootstrap3版本表现一致 */
    body {
      padding-top: 70px;
    }
  </style>
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">站点品牌</a>
      <!-- 小屏折叠触发按钮 -->
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="导航切换">
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- 折叠菜单容器 -->
      <div class="collapse navbar-collapse" id="mainNavbar">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" href="#">首页</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">产品中心</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">技术文档</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">关于我们</a>
          </li>
        </ul>
        <!-- 导航操作按钮，小屏自动隐藏 -->
        <div class="d-none d-lg-inline-block">
          <button class="btn btn-outline-light me-2">登录</button>
          <button class="btn btn-primary">立即注册</button>
        </div>
      </div>
    </div>
  </nav>

  <main class="container">
    <h2>交互测试区</h2>
    <p>调整浏览器窗口宽度，验证折叠行为、按钮隐藏效果与原Bootstrap3版本完全一致。</p>
  </main>

  <!-- Bootstrap 5 JS 引入，无需额外加载jQuery -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

效果验证对照 #

• 屏幕宽度≥992px：导航横向展开，所有导航项正常排布，右侧操作按钮可见，导航栏始终固定在顶部
• 屏幕宽度<992px：导航自动收起折叠，导航项收纳进点击展开的折叠面板，操作按钮自动隐藏，仅保留三横线触发按钮
• 页面滚动时，导航栏位置保持固定，不会随页面内容偏移

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