Blazor 导航栏未显示初始值

Question

我正在尝试与 blazor 合作进行一个学习项目。安装 blazorise 后，导航栏无法像以前一样工作。一旦我启动了 web 应用程序，导航栏就没有显示，当我最小化 chrome 时，导航栏-toggler-icon 就会出现，点击该图标后，我可以看到我的导航栏。

在 NavMenu.razor 页面上，我只添加了一些导航链接（见下面的代码）。所以css类是原始的。我在 chrome 上没有任何错误。侧边栏启动后生成的html是：

<div class="sidebar"><!--!-->
    <!--!--><div class="top-row pl-4 navbar navbar-dark"><!--!-->
    <!--!--><a class="navbar-brand" href="">Rappenspalter</a>
    <button class="navbar-toggler"><!--!-->
        <span class="navbar-toggler-icon"></span>
    </button><!--!-->
</div><!--!-->

<div class="collapse"><!--!-->
    <ul class="nav flex-column"><!--!-->
        <li class="nav-item px-3"><!--!-->
            <!--!--><a href="" class="nav-link active"><!--!-->
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </a><!--!-->
        </li><!--!-->
        <li class="nav-item px-3"><!--!-->
            <!--!--><a href="counter" class="nav-link"><!--!-->
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </a><!--!-->
        </li><!--!-->
        <li class="nav-item px-3"><!--!-->
            <!--!--><a href="fetchdata" class="nav-link"><!--!-->
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </a><!--!-->
        </li><!--!-->
        <li class="nav-item px-3"><!--!-->
            <!--!--><a href="article" class="nav-link"><!--!-->
                <span class="oi oi-list-rich" aria-hidden="true"></span> Artikel
            </a><!--!-->
        </li><!--!-->
        <li class="nav-item px-3"><!--!-->
            <!--!--><a href="Kategorien" class="nav-link"><!--!-->
                <span class="oi oi-list-rich" aria-hidden="true"></span> Kategorien
            </a><!--!-->
        </li><!--!-->
    </ul><!--!-->
</div><!--!-->
</div>

当我删除“折叠”时，导航项目正在显示。

导航菜单.razor

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">Test</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">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="article">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Artikel
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="Kategorien">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Kategorien
            </NavLink>
        </li>
    </ul>
</div>

@code {
    private bool collapseNavMenu = true;

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

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

不知道是不是 Blazorise 的问题，我是安装后才注意到的。也许你们中的一个可以帮助我让导航栏恢复正常。

Answer 1

blazorise ( https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css ) 和 vs blazor web 模板中的 bootstrap.min.css 是不同的。通过 bootstrap 4.3.1，折叠类位于“display: none”并且没有覆盖，在 blazor web 模板中，折叠类被其他类覆盖。

此项目的最简单修复方法是使用模板中的 bootstrap.min.css，而不是使用 blazorise 中的给定包含。

您可以在 blazor.client 项目的 index.html 中处理它：使用：

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />

不是：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">