ASP.Net MVC 5添加新主题后导航栏异常求助

我之前也碰到过类似的Bootstrap主题兼容问题，结合你给出的配置和代码，咱们一步步来排查解决这个导航栏异常的问题。

可能的问题原因 #

首先咱们先梳理下可能导致异常的几个点：

• 版本不匹配：Lumen主题是基于特定版本的Bootstrap开发的，如果它的版本和你MVC5项目默认的Bootstrap版本不一致，很容易出现布局错乱（MVC5默认用的是Bootstrap 3.x版本）。
• 样式加载冲突：要么是你的site.css里自定义样式覆盖了Lumen主题的导航栏样式，要么是bundle加载时不小心同时引入了默认Bootstrap和Lumen主题的样式文件。
• 类名兼容性：Lumen主题可能对navbar-inverse这类默认导航栏类的样式定义和原生Bootstrap有冲突，甚至有些主题不支持这个类。

具体解决步骤 #

1. 确认Bootstrap版本一致

先检查你下载的Lumen主题对应的Bootstrap版本，一定要和项目里的Bootstrap版本匹配。你可以：

• 打开bootstrap-lumen.css文件，看开头的注释里的版本号；
• 对比项目中Scripts/bootstrap.js开头的版本号；
  如果版本不一样，去重新下载对应Bootstrap 3.x版本的Lumen主题。

2. 检查BundleConfig的加载逻辑

你的BundleConfig看起来是直接用Lumen替换了默认Bootstrap，但要确保没有重复加载默认的bootstrap.css：

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

然后右键页面→查看源代码，确认页面只加载了bootstrap-lumen.css，没有同时加载默认的bootstrap.css。如果有重复加载，把默认的bootstrap.css从bundle里移除。

3. 调整导航栏类名试试

Lumen主题可能对navbar-inverse的支持不好，你可以把导航栏的类从navbar-inverse换成navbar-default试试：

<div class="navbar navbar-default navbar-fixed-top">

替换后刷新页面，看看导航栏是否恢复正常。

4. 排查site.css的样式冲突

打开你的site.css文件，找找有没有针对导航栏的自定义样式，比如.navbar、.navbar-nav、.navbar-brand这些选择器的样式。如果有，先临时把这些样式注释掉，再测试导航栏是否正常——要是正常了，说明就是这些自定义样式和Lumen主题冲突了，你可以针对性调整这些样式的优先级或者内容。

5. 用浏览器开发者工具定位问题

如果上面的步骤都没解决，打开浏览器的F12开发者工具：

• 选中异常的导航栏元素，切换到「样式」标签；
• 查看哪些样式被划掉了（说明被其他样式覆盖），或者哪些Lumen主题的样式没有生效；
• 找到对应的样式来源（是site.css还是其他文件），然后调整样式的加载顺序或者优先级。

如果还是不行，你可以试试把Lumen主题的css内容直接复制到site.css的最顶部（临时测试），排除bundle加载的问题，或者重新下载一份完整的Lumen主题文件，确保文件没有损坏。

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