Bootstrap5移动端导航栏切换按钮不生效如何修复

已确认的故障表现 #

• 移动端视口下导航栏汉堡切换图标未正常显示
• 点击切换按钮无交互反馈，无法展开折叠的菜单内容
• 为切换图标添加红色边框后可正常看到边框，证明按钮元素已完成渲染，不存在元素缺失问题

核心问题点 #

• 组件属性版本不兼容：Bootstrap 5 所有交互组件的data-*属性都新增了bs前缀，当前代码用的是Bootstrap 4的旧属性data-toggle="collapse"、data-target=".collapsenav"，属性名不匹配导致JS完全不触发折叠逻辑。
• 折叠目标选择器不匹配：按钮上配置的折叠目标是类.collapsenav，但实际承载菜单的折叠容器（带navbar-collapse collapse类的div）没有添加这个类，JS找不到需要控制展开/收起的目标元素。
• 汉堡图标显示逻辑错误：.navbar-toggler-icon的图标是通过SVG背景图实现的，直接给元素加color:white无法改变图标颜色，深色导航栏下默认黑色图标会和背景融为一体，看起来像没显示。
• HTML结构冗余：导航栏的.container-fluid节点下多写了一个多余的</div>闭合标签，会导致DOM结构解析错乱。
• 自定义样式冲突：
  • 给.container-fluid写死了height:30px，移动端菜单展开时容器高度被锁死，内容会被裁切无法显示
  • 强制给nav ul li设置display:inline-block，覆盖了Bootstrap导航栏移动端默认的纵向堆叠布局，展开后排版错乱

修复步骤 #

• 把切换按钮的属性替换为Bootstrap5规范的data-bs-toggle="collapse"、data-bs-target="#navbarNav"
• 给菜单折叠容器添加唯一IDid="navbarNav"，和按钮的目标选择器对应
• 给切换按钮添加data-bs-theme="dark"属性，自动适配深色导航栏下的白色汉堡图标，不需要手动改颜色
• 删除多余的闭合</div>标签
• 移除.container-fluid的固定高度设置
• 调整自定义列表样式，把nav ul li的display:inline-block规则放在媒体查询里，仅在md及以上桌面端生效，移动端保留默认块级纵向排列

修复后可直接运行的代码 #

<header>
<div class="jumbotron">
  <div class="container text-center">
      <div class="intro-video">
        <video class="videobaner" id="video" preload autoplay="true" loop="loop" muted="muted" volume="0"> 
            <source src="img/background.mp4" type="video/mp4"> 
            <source type="video/webm" src="img/theremin2.mp4">
        </video>
    </div>
</div>
</header>

<nav class="navbar navbar-expand-md" style="width:auto;background-color:black;">
        <div class="container-fluid mb-2 mt-2">
            <div class="navbar-collapse collapse flex justify-content-md-center" id="navbarNav">
                <ul class="navbar-nav mr-auto align-center">
                    <li class="nav-item">
                        <a class="nav-link" href="music.php"> MUSIC </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="events.php"> EVENTS </a>
                    </li>
                    <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">FEATURED</a>
                             <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <li><a class="dropdown-item" href="arts.php">ARTS</a></li>
                                <li><a class="dropdown-item" href="blog.php">BLOG</a></li>
                             </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">SUBSCRIPTION </a>
                    </li>
                </ul>
            </div>
            <div class="d-flex flex-md-fill flex-shrink-1 d-md-none">
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" data-bs-theme="dark">
                    <span class="navbar-toggler-icon" style="border:2px solid red;"></span>
                </button>
            </div>
        </div>
</nav>

<style>
header .jumbotron{
    position: relative;
    background-color: black;
    height: 100%;
    min-height: 40rem;
    width: 100%;
    overflow: hidden;
  }

  nav {
  opacity: 80%;
  padding: 20px;
  z-index: 9999;
  margin: 0;
  width: 50%;
  left: 0px;
  right: 0px; 
  bottom:0px;
  border-radius: 1px;
  color: white !important;
  }
 nav ul {
    text-transform: uppercase;
    padding:20px 35px;
    margin: 0;
    font-size: .450rem;
    font-weight: 400;
    color: white!important;
  }
  @media (min-width: 768px) {
    nav ul li {
      display:inline-block;
      text-align: center;
      padding:20px 35px;
      height: 1%;
    }
  }
  nav ul a {
    height:35px;
    line-height:20px;
    padding:16px 32px;
    margin: 4px 2px;
    color:white !important;
    font-size: 20px;
    letter-spacing: 2px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration:none;
  }
  nav ul a:hover {
    padding: 20px;
    border-radius: 15px;
    color: white!important;
  }
</style>

注意：使用前请确认页面已经正确引入Bootstrap5的CSS和JS bundle文件，否则所有交互组件都无法正常工作。

内容的提问来源于stack exchange，提问作者Alba Heidari Sanchez