Bootstrap 5下拉菜单无法正常展开问题求助

问题根源 #

• 属性命名变更：Bootstrap 5 已将下拉菜单的触发属性从 Bootstrap 4 的 data-toggle 改为 data-bs-toggle，原代码使用旧属性导致交互逻辑无法触发。
• 缺失必要结构：<li class="nav-item dropdown"> 必须包裹在 <ul class="nav">（或导航栏场景的 <ul class="navbar-nav">）中，否则 Bootstrap 无法正确识别并绑定组件交互。

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap</title>
  <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
  
</head>
<body>
  <!-- 添加父级.nav容器 -->
  <ul class="nav">
    <li class="nav-item dropdown">
      <!-- 替换为Bootstrap 5的触发属性 -->
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </li>
  </ul>
  <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>

额外说明 #

• 你引入的 bootstrap.bundle.js 已包含下拉菜单依赖的 Popper.js，无需额外引入第三方库，这部分配置是正确的。
• 若需在导航栏（Navbar）中使用，只需将父级 <ul class="nav"> 替换为 <ul class="navbar-nav">，即可适配导航栏样式规范。

内容的提问来源于stack exchange，提问作者tan shi yu