Blazor Navbar 未显示首字母

Question

我正在尝试与 blazor 合作进行学习项目。安装 blazorise 后，导航栏无法像以前一样工作。一旦我启动 webapp，导航栏就不会显示，当我最小化 chrome 时，navbar-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>

当我删除 "collapse" 时，导航项正在显示。

NavMenu.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 网页模板的 bootstrap.min.css 是不同的。通过 bootstrap 4.3.1，折叠 class 在 "display: none" 上并且没有覆盖，在 blazor web 模板中，折叠 class 被另一个 class 覆盖.

此项目最简单的修复方法是使用模板中的 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">

Answer 2

重建解决方案解决了布局问题。

Answer 3

我发现的第二个选项是删除 NavMenu.Razor.css.

Blazor Navbar 未显示首字母

Blazor Navbar not showing initial

bootstrap-4

blazor-client-side

blazorise