Bootstrap 5下拉导航菜单在ASP.NET Core MVC Razor布局页无法工作

核心问题点 #

• 重复DOM ID冲突：代码中两个下拉菜单的触发链接都使用了相同的id="navbarDropdown"，HTML规范要求同一页面内ID必须唯一，Bootstrap下拉菜单依赖aria-labelledby属性匹配触发元素和菜单容器，重复ID会直接导致关联逻辑失效。
• JS加载顺序错误：你将bootstrap.bundle.min.js放在了<head>标签中加载，JS执行时页面DOM还未完成渲染，下拉菜单的DOM元素还未生成，导致交互事件绑定失败。

修复步骤 #

1. 为两个下拉触发链接设置唯一ID，同步修改对应下拉菜单的aria-labelledby属性：

   <!-- 第一个下拉菜单修改后 -->
   <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle" href="#" id="applyDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
           Apply For A Scholarship
       </a>
       <ul class="dropdown-menu" aria-labelledby="applyDropdown">
           <!-- 菜单项保持不变 -->
       </ul>
   </li>
   
   <!-- 第二个下拉菜单修改后 -->
   <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle" href="#" id="regDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
           Registration
       </a>
       <ul class="dropdown-menu" aria-labelledby="regDropdown">
           <!-- 菜单项保持不变 -->
       </ul>
   </li>
   

2. 将Bootstrap JS的引用从<head>中移除，移动到</body>标签之前，放在所有DOM元素的末尾：

   <!-- 原有其他代码不变 -->
       <div>
           <main role="main">
               @RenderBody()
           </main>
       </div>
       <!-- 把JS引用移到这里 -->
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
   </body>
   </html>
   

3. 额外检查：确认子页面（使用该布局的内容页）没有引入重复的Bootstrap脚本、其他版本的Bootstrap资源，避免出现JS冲突。

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