Bootstrap Blazor导航菜单切换器未显示

hlswsv35 于 4个月前发布在 Bootstrap

关注(0)|答案(1)|浏览(65)

我使用的是Blazor的默认导航菜单组件，它的切换器不会出现在宽屏幕上（> 640 px;它适用于较小的屏幕）。

我所尝试的

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

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

字符串
使用display:normal!important;添加静态内联样式引用（将显示为交叉并被上面的图像覆盖）。
在浏览器中将none更改为normal（虽然图标会出现，但它的功能：折叠导航菜单不会起作用）。

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>

型

twitter-bootstrap

来源：https://stackoverflow.com/questions/68347793/blazor-navmenu-toggler-not-showing

1条答案

按热度按时间

yqlxgs2m1#

NavMenu.razor.css具有以下功能：

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

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

字符串
因此不显示触发器。

赞(0）回复(0）举报 4个月前

我来回答

Bootstrap Blazor导航菜单切换器未显示

1条答案

相关问题

热门标签

最新问答