ASP.NET MVC更换Bootswatch主题后Navbar无法正常显示求助

可能的原因及解决步骤 #

1. 核对BundleConfig中的文件路径与实际文件 #

确认BundleConfig.cs里的Bootstrap CSS文件名、路径和Content文件夹中的文件完全一致，注意文件名大小写（虽然Windows不区分，但Bundle打包机制可能敏感）：

bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/bootstrap-lumen.css", // 确保和实际文件名完全匹配
    "~/Content/site.css"));

同时检查Content文件夹内是否确实存在目标CSS文件，没有拼写错误。

2. 验证Navbar HTML结构与Bootstrap版本匹配 #

Bootswatch主题是绑定特定Bootstrap版本的，如果你的_Layout使用的是旧版Bootstrap的Navbar结构，但下载的是适配新版Bootstrap的主题，就会出现不显示的问题：

• 若使用Bootstrap 3对应主题，Navbar结构示例：

<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("应用名称", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("首页", "Index", "Home")</li>
                <li>@Html.ActionLink("关于", "About", "Home")</li>
                <li>@Html.ActionLink("联系", "Contact", "Home")</li>
            </ul>
        </div>
    </div>
</nav>

• 若使用Bootstrap 4+对应主题，需使用新版Navbar结构：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        @Html.ActionLink("应用名称", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="切换导航">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    @Html.ActionLink("首页", "Index", "Home", new { area = "" }, new { @class = "nav-link" })
                </li>
                <li class="nav-item">
                    @Html.ActionLink("关于", "About", "Home", new { area = "" }, new { @class = "nav-link" })
                </li>
                <li class="nav-item">
                    @Html.ActionLink("联系", "Contact", "Home", new { area = "" }, new { @class = "nav-link" })
                </li>
            </ul>
        </div>
    </div>
</nav>

检查你的_Layout中Navbar的类名、结构是否和主题对应的Bootstrap版本匹配。

3. 查看浏览器控制台的错误提示 #

按F12打开浏览器开发者工具，切换到Console标签：

• 检查是否有CSS文件加载失败的404错误（路径错误会导致主题样式未生效）
• 检查是否有JavaScript错误（比如缺少jQuery或Bootstrap JS依赖，会导致Navbar折叠交互异常）

4. 确认Bootstrap JS及依赖是否正确引用 #

Navbar的折叠等交互需要Bootstrap JS支持，且依赖jQuery，检查_Layout.cshtml底部的引用：

<script src="~/Scripts/jquery-3.5.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

确保JS版本和Bootswatch主题对应的Bootstrap版本一致。

5. 排查site.css的样式冲突 #

项目自带的site.css可能存在自定义样式覆盖了Bootstrap的Navbar样式，可临时注释掉site.css的引用，测试Navbar是否正常显示，以此排查是否为样式冲突问题。

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