Bootstrap下拉菜单无显示问题排查及代码修正请求

问题原因分析 #

你的代码存在几个关键问题导致下拉菜单无法正常工作：

• Bootstrap版本属性不兼容：如果使用的是Bootstrap 5，触发下拉的属性应该是data-bs-toggle而非旧版的data-toggle
• 脚本引入顺序错误：Bootstrap 4依赖jQuery，必须先引入jQuery再引入Popper和Bootstrap；Bootstrap 5无需jQuery，但Popper必须在Bootstrap之前引入
• 按钮语义化问题：用<div>作为按钮虽然能显示，但语义化不足，建议改用<button>标签

修复后的完整代码（Bootstrap 5版本） #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Navbar with Dropdown</title>
  <link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
  <div class="row m-2 align-items-center">
    <div class="col"><h2>logo</h2></div>
    <div class="col">
      <div class="dropdown">
        <button
          class="btn btn-success dropdown-toggle"
          id="dropdownMenuButton"
          type="button"
          data-bs-toggle="dropdown"
          aria-expanded="false"
        >
          Courses
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <li><a class="dropdown-item" href="#">A1</a></li>
          <li><a class="dropdown-item" href="#">A2</a></li>
          <li><a class="dropdown-item" href="#">B1</a></li>
          <li><a class="dropdown-item" href="#">B2</a></li>
        </ul>
      </div>
    </div>
    <div class="col"><button class="btn btn-outline-dark">About me</button></div>
    <div class="col"><button class="btn btn-outline-dark">Contact</button></div>
  </div>

  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.js"></script>
</body>
</html>

额外注意事项 #

• 确认本地的css/bootstrap.css、js/popper.min.js、js/bootstrap.js文件路径正确，且版本统一（均为Bootstrap 5）
• 如果坚持使用Bootstrap 4，需调整脚本引入顺序为：jquery-3.7.1.min.js → popper.min.js → bootstrap.js，同时保留data-toggle属性

内容的提问来源于stack exchange，提问作者Wooden-Spoon