我从 VS2019 模板创建了一个新的 blazor 应用程序，该模板将菜单作为侧边栏。我花了一大早上的时间试图像当前的 MVC 模板一样在页面顶部获取菜单，但完全没有得到任何地方！
有没有人有一个从侧面和顶部移除导航栏的 Blazor 模板？
【问题讨论】：
Blazor 中的侧边栏并没有什么特别之处。如果您检查MainLayout.razor，您将看到对具有sidebar 类的NavMenu 组件的引用：
<div class="sidebar">
<NavMenu />
</div>
如果您打开NavMenu.razor，您会发现它只是一个Bootstrap Navbar，方便地打包在一个可重复使用的组件中。
更新
Blazor 使用 Bootstrap 使其余问题成为样式表问题，而不是 Blazor 问题。
Blazor 模板的样式表是为这种类似于 Explorer 的特定布局而构建的 - 左侧是垂直导航栏，右侧是主要区域。颜色，尺寸，最重要的是流量，都是为此而设计的。修改一个样式类是不够的。
另一方面，Razor 页面 样式表是为“经典”引导程序外观而构建的，菜单在顶部，容器和行在中间，页脚和页眉。这意味着，我们可以从新的 Razor Pages 应用程序“借用”样式表和布局。
dotnet new webapp 创建一个新项目
site.css 中除第一行之外的所有内容：@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
site.css 的内容复制到 Blazor 的 site.css。该文件应如下所示：@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
...
Shared\MainLayout.razor 以模仿 Razor 的 Shared\_Layout.cshtml 中的结构：@inherits LayoutComponentBase
<header>
<NavMenu />
</header>
<div class="container">
<main role="main" class="pb-3">
@Body
</main>
</div>
这里没有页脚，因为 Blazor 模板中没有 Privacy 页面。
Shared\NavMenu.razor 以使用Razor 模板的结构和样式。 <a> 元素需要替换为 NavLink 元素。另一个棘手的部分是 Razor 中的切换器通过 data-toggle="collapse" data-target 属性工作，这在 Blazor 中不起作用。这就是需要点击处理程序的原因：<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" href="">blazornav</a>
<button class="navbar-toggler" type="button" @onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<NavLink class="nav-link text-dark" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</li>
<li class="nav-item">
<NavLink class="nav-link text-dark" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
</li>
<li class="nav-item">
<NavLink class="nav-link text-dark" href="fetchdata">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink>
</li>
</ul>
</div>
</div>
</nav>
点击处理程序只是将collapse 类添加或删除到从 Razor 复制的基本导航栏样式
@code {
bool collapseNavMenu = true;
string baseMenuClass = "navbar-collapse d-sm-inline-flex flex-sm-row-reverse";
string NavMenuCssClass => baseMenuClass + (collapseNavMenu ? " collapse" : "");
void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
}
这会产生一个水平菜单，右侧有一个切换器：
【讨论】：
main 和 toprows 样式类的影响。 site.css 中指定的布局用于垂直导航栏，其余用于内容。您应该从适合您的 站点的新样式表开始。只是为了试验，你可以清除 site.css 文件或复制现有的样式表
按照@Panagiotis Kanavos 的建议，我设法为顶部菜单栏创建了一个基本模板/解决方案：
【讨论】：
dotnet new webapp 开始这个问题？我试图重新创建相同但没有得到相同的结果..
【讨论】：
我昨天刚刚经历了同样的事情。非常令人沮丧。我能够摆脱侧边栏并将菜单放在顶部。不幸的是，在我这样做之后，在小型设备中，当单击切换按钮后展开菜单时，品牌、切换按钮和菜单都垂直居中于展开区域，人们希望只出现菜单项。品牌和切换按钮应保留在第一行。
今天早上，我看到一个帖子 (https://www.nativoplus.studio/blog/blazor-layouts/) 建议修改 Blazor 模板中包含的引导 css。要获得默认行为，您需要将它（和 site.css）从 _Host.cshtml 中注释掉，并将其替换为官方引导 css 文件。
当我这样做时，菜单开始几乎正常工作。奇怪的格式消失了。我现在的问题是，在小型设备上，选择菜单后，菜单不会折叠。我假设它与 Blazor 处理 UI 更改的方式有关。换句话说，由于菜单内容在做出选择后没有改变，所以它不会重新渲染菜单。
如果我想出折叠菜单的方法，我会在这里发布。
【讨论】：
您可以删除 MainLayout.razor 中的大部分内容，只留下基本内容，并使用样式标签在 razor 页面中创建自己的 css 样式。
@inherits LayoutComponentBase
<PageTitle>Portfolio</PageTitle>
<div class="page">
<main>
@Body
</main>
</div>
【讨论】：