添加Bootstrap 5 CDN后Blazor Server左侧导航菜单消失求助

在VS 2022社区版开发Blazor Server应用，基于非空模板创建项目后，要实现Bootstrap折叠div功能。默认项目配置无法实现该功能，添加Bootstrap 5的CDN链接至_Host.cshtml文件后，折叠功能正常，但左侧导航菜单变为空白（下图左侧为未添加CDN的状态，右侧为添加后的状态）。

NavMenu代码 #

仅在VS生成的通用代码基础上新增了几个NavLink：

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">Hub</a>
        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>

<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="home/-1/-1/-1/-1/-1" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="resorts">
                <span class="oi oi-globe" aria-hidden="true"></span> Resorts
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="contacts/-1">
                <span class="oi oi-people" aria-hidden="true"></span> Contacts
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="homeold">
                <span class="oi oi-cog" aria-hidden="true"></span> Admin
            </NavLink>
        </div>
    </nav>
</div>

@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

原项目_Host.cshtml相关代码 #

项目原本使用内置的Bootstrap，相关资源引用如下：

<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="HUB.styles.css" rel="stylesheet" />
<link rel="icon" type="image/png" href="favicon.png"/>

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

<script src="_framework/blazor.server.js"></script>

测试项目_Host.cshtml代码 #

为排除第三方库影响，新建不含Syncfusion和FontAwesome的项目，添加CDN后仍出现导航菜单消失问题，该项目的_Host.cshtml代码如下：

@using Microsoft.AspNetCore.Components.Web
@namespace BlazorApp1test.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="BlazorApp1test.styles.css" rel="stylesheet" />

    <link rel="icon" type="image/png" href="favicon.png"/>
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.server.js"></script>
</body>
</html>

排查方向建议 #

• 样式优先级与重复加载冲突：同时引入本地Bootstrap和CDN版本，CDN样式覆盖了导航菜单的核心布局样式。打开浏览器开发者工具（F12），查看导航菜单元素的样式，确认哪些属性被CDN样式覆盖或重置。
• Bootstrap版本不匹配：Blazor非空模板默认内置的Bootstrap版本可能不是5.x，直接添加Bootstrap 5 CDN会导致类逻辑冲突（比如.collapse类的显示规则、布局类的变化）。检查本地Bootstrap的版本号，确认是否与CDN版本一致。
• 自定义样式被覆盖：项目site.css中包含导航菜单的自定义样式（如宽度、定位规则），CDN的Bootstrap样式优先级更高，导致这些自定义样式失效。检查site.css中.nav-scrollable、.top-row等选择器的样式是否被覆盖。
• 折叠类行为变化：Bootstrap 5中.collapse类的默认行为与旧版本不同，Blazor模板通过切换该类控制菜单显隐，CDN版本可能修改了该类的默认display值，导致菜单默认隐藏且无法正确切换。
• 资源加载顺序错误：应替换本地Bootstrap链接而非新增，同时加载两个版本必然导致样式混乱。尝试移除本地的css/bootstrap/bootstrap.min.css引用，仅保留CDN版本。

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