Blazor默认NavMenu组件导航切换器宽屏（>640px）不显示问题求解

问题核心 #

Blazor默认NavMenu组件依赖Bootstrap默认导航规则，宽度≥641px时会强制隐藏.navbar-toggler元素，同时默认展开侧边栏菜单，导致手动修改显示后切换功能失效。你之前的尝试失败主要有两个原因：

• CSS属性使用错误：display: normal不是合法的CSS属性值，块级按钮需要使用display: block
• 未覆盖宽屏下菜单的默认展开规则，导致切换类不生效

修复步骤 #

步骤1：替换site.css中的样式代码 #

直接在site.css末尾添加以下代码，优先级高于Bootstrap默认规则：

/* 所有宽度下都显示导航切换器，若仅需≥768px显示可套入@media (min-width:768px) {} */
.navbar-toggler {
    display: block !important;
}

/* 覆盖宽屏下菜单默认展开的规则，适配切换逻辑 */
@media (min-width: 641px) {
    .sidebar .collapse {
        display: none !important;
    }
    .sidebar .collapse.show {
        display: flex !important;
    }
}

步骤2：确认NavMenu.razor的切换逻辑 #

确保你NavMenu.razor的@code块逻辑和以下一致，没有额外的宽度判断：

private bool collapseNavMenu = true;
private string NavMenuCssClass => collapseNavMenu ? "collapse" : "show";

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

步骤3：（可选）优先级不足时的处理 #

如果样式还是被覆盖，给切换按钮加自定义类提高优先级：

<button class="navbar-toggler custom-nav-toggler" @onclick="ToggleNavMenu">
    <span class="navbar-toggler-icon"></span>
</button>

再把CSS选择器替换为.custom-nav-toggler即可。

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