ASP.NET MVC集成Bootstrap后导航栏功能异常求助

问题现象 #

• 全屏状态下导航栏仍显示移动端下拉按钮
• 点击下拉按钮后，菜单选项仅显示1秒就自动收起

排查与解决步骤 #

1. 确认jQuery与Bootstrap版本兼容性

Bootstrap的JS组件依赖jQuery，版本不匹配会直接导致功能异常：

• Bootstrap 3 要求 jQuery 1.9.1 及以上版本
• Bootstrap 4 要求 jQuery 3.0 及以上版本
  核对项目Scripts目录下的jQuery版本，确保与Bootstrap版本兼容。

2. 强制脚本加载顺序

Bootstrap必须在jQuery之后加载，检查_Layout.cshtml中的脚本引用顺序，必须遵循以下顺序：

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

顺序颠倒会导致Bootstrap无法初始化依赖的jQuery方法，引发菜单点击后立即收起的问题。

3. 修复导航栏响应式结构

全屏仍显示下拉按钮，通常是缺少响应式展开类或CSS规则缺失：

• 确认重命名的bootstrap-lumen2.css是完整的Lumen主题文件，包含Bootstrap的媒体查询规则（如@media断点控制）
• 给导航栏添加对应Bootstrap版本的响应式展开类：
  • Bootstrap 3：使用navbar-expand-md/navbar-expand-lg类控制菜单展开的屏幕宽度
  • Bootstrap 4+：使用navbar-expand-{breakpoint}类（例如navbar-expand-lg表示屏幕≥992px时展开菜单）
    标准导航栏结构示例：

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarMenu">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>
    </div>
  </nav>
  

4. 排查脚本重复加载问题

检查项目中是否存在重复加载jQuery或Bootstrap脚本的情况：

• 若_Layout.cshtml已通过Bundle加载脚本，局部视图或其他页面又单独用<script>标签引入相同文件，会引发脚本冲突，导致菜单自动收起。

5. 验证Bundle路径正确性

确认Bundle配置中引用的文件路径无误：

• 检查~/Content/bootstrap-lumen2.css和~/Scripts/bootstrap.js是否存在于对应目录，路径拼写无错误。

优化后的Bundle配置示例（确保版本匹配） #

public static void RegisterBundles(BundleCollection bundles)
{
    // 指定与Bootstrap兼容的jQuery版本，示例为3.5.1，可根据实际版本调整
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-3.5.1.js"));

    bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

    bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js"));

    bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap-lumen2.css",
                  "~/Content/site.css"));
}

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