Blazor 导航栏未显示初始

Question

我正在尝试与blazer合作进行学习项目。安装 blazorise 后，导航栏无法像以前那样工作。启动 Web 应用程序后，导航栏不会显示，当我最小化 chrome 时，导航栏切换器图标就会出现，单击该图标后，我可以看到我的导航栏。

在NavMenu.razor页面上，我只添加了一些导航链接(见下面的代码(。所以 css 类是原始的。我在铬上没有任何错误。启动侧边栏后生成的 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>

当我删除"折叠"时，导航项目会显示。

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 Web模板的bootstrap.min.css是不同的。在引导 4.3.1 中，折叠类处于"显示：无"状态，并且没有覆盖，在 blazor Web 模板中，折叠类将从其他类覆盖。

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

可以在索引中处理它.html在 blazor.client 项目中： 用：

<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。