切换至平板/移动端尺寸后Bootstrap导航按钮失效，如何修复？

核心问题与修复步骤： #

• 修正属性前缀：Bootstrap 5 中折叠组件的目标属性需使用 data-bs-target 而非 data-target，与已使用的 data-bs-toggle 保持统一前缀。修改后的按钮代码：

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">
  <span class="navbar-toggler-icon"></span>
</button>

• 确认Bootstrap版本匹配：确保引入的CSS和JS均为Bootstrap 5版本。Bootstrap 4使用data-toggle/data-target，而Bootstrap 5统一采用data-bs-*前缀，版本混用会导致功能失效。

• 补全DOM结构：原代码中<div class="navbar-collapse collapse" id="navbarTogglerDemo02">未闭合，需添加</div>和</nav>保证DOM结构完整，否则JS无法正确定位目标元素。完整导航栏代码：

<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
  <a class="navbar-brand" href="">tindog</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-collapse collapse" id="navbarTogglerDemo02">
    <ul class="head navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link" href="#footer">Contact</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#pricing">Pricing</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#cta">Download</a>
        </li>
    </ul>
  </div>
</nav>

• 检查JS加载逻辑：Bootstrap 5无需依赖jQuery，直接加载官方提供的Bootstrap JS文件即可，建议将JS脚本放在页面底部或添加defer属性，确保DOM加载完成后再执行JS代码。

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