ASP.NET Core中Bootstrap下拉菜单无法正常工作的问题

问题场景 #

在ASP.NET Core项目中使用Bootstrap官方文档的下拉菜单代码，仅能显示带箭头的按钮，但点击无任何下拉展开效果。已尝试安装Popper但无效，当前页面引用的样式和脚本如下：

页面头部样式引用：

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - HellBotWebUI</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/HellBotWebUI.styles.css" asp-append-version="true" />
</head>

页面底部脚本引用：

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>

使用的下拉菜单代码：

<li class="nav-item">
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
            Dropdown button
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
   </div>
</li>

排查与解决步骤 #

• 版本兼容性检查
  Bootstrap 5已移除对jQuery的依赖，若你使用的是Bootstrap 5版本，继续引用jQuery会引发冲突。bootstrap.bundle.min.js已经内置Popper，无需额外安装。确认版本后，若为v5+，直接移除jQuery引用即可。

• 修正HTML属性命名
  Bootstrap 5将原Bootstrap 4的data-toggle属性更改为data-bs-toggle，这是最常见的失效原因。修改按钮的属性后，下拉功能即可恢复正常：

  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown button
  </button>
  

• 验证脚本加载状态
  打开浏览器开发者工具（F12）：

  • 查看控制台是否有JS报错，比如文件加载失败、未捕获的异常；
  • 切换到网络标签，确认bootstrap.bundle.min.js已成功加载，返回状态为200。

• 检查依赖文件完整性
  确认~/lib/bootstrap目录下的CSS和JS文件完整，若存在缺失，重新运行npm install bootstrap命令重新安装依赖。

• 排查自定义样式冲突
  检查site.css或HellBotWebUI.styles.css中是否有覆盖Bootstrap下拉菜单的样式规则，比如强制设置.dropdown-menu为display: none且未被JS正确触发，或者修改了元素定位属性导致下拉框无法正常显示。

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