Blazor NavMenu Toggler 不显示答案

【问题标题】：Blazor NavMenu Toggler Not ShowingBlazor NavMenu Toggler 不显示
【发布时间】：2021-09-21 15:29:12
【问题描述】：

我正在使用 Blazor 的默认 NavMenu 组件，它的切换器不会出现在宽屏幕上（>640 像素；它适用于较小的屏幕）。分析css：有一个显示：无。

我的尝试

将以下代码添加到 site.css：

@media (min-width: 768px) {
    .navbar-toggler {
        display: normal;
    }
}

添加带有display:normal!important; 的静态内联样式引用（将显示为交叉并被上图覆盖）。

在浏览器中将无更改为正常（虽然会出现图标，但它的功能：折叠导航菜单不起作用）。

NavMenu.razor

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">QRQC</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
    ...
    </ul>
</div>

_Host.cshtml

@page "/"
@namespace QRQC.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>QRQC</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="QRQC.styles.css" rel="stylesheet" />
    <link href="_content/Blazored.Toast/blazored-toast.min.css" rel="stylesheet" />
    <link href="lib/fontawesome/css/fontawesome.min.css" rel="stylesheet" />
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
    <link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />

    <script src="lib/fontawesome/js/all.min.js"></script>
    <script src="_content/MatBlazor/dist/matBlazor.js"></script>

</head>
<body>
    <component type="typeof(App)" render-mode="Server" />

    <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="js/jquery/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>

    <script src="js/site.js"></script>
    <script src="_framework/blazor.server.js"></script>
    <script src="_content/CurrieTechnologies.Razor.SweetAlert2/sweetAlert2.min.js"></script>
    <script src="_content/MudBlazor/MudBlazor.min.js"></script>

</body>
</html>

【问题讨论】：

它在浏览器开发工具中告诉你为什么它是 display: none - 你的 css 文件 QRQC.styles.css 的第 269 行 - 去那里看看你做了什么。您可能会发现这是从 NavMenu.razor.css 中的范围样式生成的样式。这可能是另一个在宽屏上隐藏按钮的媒体查询。
是的@MisterMagoo，我刚刚找到了这些行。评论他们使按钮出现。但是现在，由于 NavMenu 组件涉及<div class="sidebar">，因此折叠只会折叠组件而不是侧边栏，所以我会在左侧看到一个彩色方块。是我还是 NavMenu 没有真正完善？
默认导航菜单只是一个默认菜单——它不像你注意到的那样非常精致。

标签： twitter-bootstrap blazor

【解决方案1】：

NavMenu.razor.css 有以下内容：

@media (min-width: 641px) {
    .navbar-toggler {
        display: none;
    }

    .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}

因此，不显示切换器。

【讨论】：