我正在尝试与 blazor 合作开展学习项目。安装 blazorise 后，导航栏无法像以前那样工作。一旦我启动 web 应用程序，导航栏就不会显示，当我最小化 chrome 时，会显示导航栏切换器图标，单击该图标后，我可以看到我的导航栏。
在 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的问题，安装后才注意到。也许你们中的一个人可以帮助我让导航栏恢复正常。