Bootstrap 5 Nav Pills切换视图功能异常求助

以下是几个最可能的问题点和对应的修复方法：

• 核对数据属性与容器ID的匹配性：确保每个.nav-link的data-bs-target值和对应内容容器的id完全一致，包括大小写、空格和特殊字符。比如第一个pill的data-bs-target="#column-view"，第二个必须对应#grid-view，拼写错误是最常见的原因。

• 确认内容容器的类名：每个切换容器必须添加tab-pane类，默认显示的容器额外加active类（如果用过渡效果，还需加fade show）。示例正确结构：

<div class="tab-content">
  <div class="tab-pane fade show active" id="column-view">列表视图内容</div>
  <div class="tab-pane fade" id="grid-view">网格视图内容</div>
</div>

• 检查Bootstrap JS引入是否正确：Nav Pills依赖Bootstrap的JavaScript，必须引入bootstrap.bundle.min.js（已包含Popper，无需单独引入），且确保脚本在DOM加载完成后执行——可以放在</body>标签前，或者给script标签加defer属性。

• 排查自定义脚本冲突：如果页面中有自定义的点击事件绑定到.nav-link，检查是否调用了preventDefault()但未处理视图切换逻辑，这会覆盖Bootstrap的默认行为。

• 验证HTML结构合规性：Nav Pills的结构必须符合Bootstrap规范，正确层级为：.nav-pills → .nav-item → .nav-link，不能嵌套错误。示例完整结构：

<ul class="nav nav-pills" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#column-view" type="button">Column View</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" data-bs-toggle="pill" data-bs-target="#grid-view" type="button">Grid View</button>
  </li>
</ul>

内容的提问来源于stack exchange，提问作者Luis M.