Bootstrap 5 中下拉菜单失效，通常因混淆了 v4 的 data-toggle 属性与 v5 的 data-bs-toggle，且缺少必需的 JavaScript 支持。本文详解正确配置方式、关键代码示例及易错点排查。
bootstrap 5 中下拉菜单失效，通常因混淆了 v4 的 `data-toggle` 属性与 v5 的 `data-bs-toggle`，且缺少必需的 javascript 支持。本文详解正确配置方式、关键代码示例及易错点排查。
在 Bootstrap 5 中，下拉（Dropdown）组件的行为完全依赖于其内置的 JavaScript 插件，且 HTML 属性命名已全面升级为带 bs- 前缀的语义化格式。若你沿用 Bootstrap 4 的写法（如 data-toggle="dropdown"），浏览器将无法识别，导致点击后菜单不展开——这正是 dropdown-item 不显示的根本原因。
✅ 正确配置三要素
- 使用 data-bs-toggle="dropdown"（非 data-toggle）
- 引入完整的 Bootstrap 5 JS 包（推荐 bootstrap.bundle.min.js，含 Popper）
- 确保 DOM 结构合法：.dropdown-toggle 与 .dropdown-menu 必须同属一个 .dropdown 父容器（强烈建议显式包裹，提升可维护性）
✅ 推荐写法（含语义化结构）
<!-- 引入 Bootstrap 5 CSS 和 JS（务必使用 bundle 版本） -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- 正确的下拉结构：用 .dropdown 包裹 -->
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle"
type="button"
id="userDropdown"
data-bs-toggle="dropdown"
aria-expanded="false">
<i class="fa-solid fa-user fs-5"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
<li><a class="dropdown-item" href="#">Login</a></li>
<li><a class="dropdown-item" href="#">Register</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item text-danger" href="#">Logout</a></li>
</ul>
</div>? 注意：
- dropdown-menu-end 替代了旧版 dropdown-menu-right（Bootstrap 5+ 已弃用后者）；
- 使用
+
- 包裹 是官方推荐语义结构，更利于无障碍访问；
- 若使用独立 JS（非 bundle），需额外引入 Popper.js（v2），否则下拉定位异常或完全不显示。
⚠️ 常见排查清单
- ❌ 忘记引入 bootstrap.bundle.min.js（仅引入 CSS 或 bootstrap.min.js 会导致下拉无响应）
- ❌ 混用 CDN 版本（如 CSS 用 v5，JS 仍引用 v4 资源）
- ❌ aria-labelledby 的 ID 值与触发按钮 id 不匹配（大小写敏感）
- ❌ 在未加载完 DOM 时就初始化下拉（但使用 data-bs-toggle 属性方式可自动处理，无需手动 new Dropdown()）
✅ 总结
Bootstrap 5 的下拉功能并非纯 CSS 实现，而是强依赖 JavaScript 插件与标准化属性。只需三步即可快速修复：更新 data-bs-toggle 属性、引入 bootstrap.bundle.min.js、包裹标准 .dropdown 容器。遵循此模式，不仅能解决 dropdown-item 不显示问题，还能保障响应式定位、键盘导航（Esc 关闭、方向键切换）等原生交互体验。
