ASP.NET Core MVC中Bootstrap下拉菜单无法展开问题求助

核心问题与修复步骤 #

1. Bootstrap 5数据属性不匹配 #

你当前引用的是Bootstrap 5的bootstrap.bundle.min.js，但下拉菜单触发用了Bootstrap 4的data-toggle="dropdown"属性，Bootstrap 5要求使用data-bs-toggle="dropdown"。

修改Manage下拉的触发标签：

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink"
   data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Manage
</a>

2. 修复多余的HTML标签 #

代码中Privacy选项前存在一个未闭合的<li class="nav-item">标签，会破坏导航栏DOM结构，导致交互异常，需删除该多余标签：
原错误代码：

<li class="nav-item">
<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>

修改后：

<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>

3. 可选：修复SCSS文件引用问题 #

浏览器无法直接解析SCSS文件，你当前引用的bootswatch.scss需替换为编译后的CSS文件，例如：

<link rel="stylesheet" href="~/css/bootswatch.min.css" />

（若已通过构建工具完成SCSS编译，此步骤可忽略）

修复后的导航栏关键代码片段 #

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink"
       data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Manage
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" asp-controller="Administration"
           asp-action="ListUsers">Users</a>
        <a class="dropdown-item" asp-controller="Administration"
           asp-action="ListRoles">Roles</a>
    </div>
</li>
<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>

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