VS2019 中 WebAssembly 模板中 Blazor 中的顶部菜单而不是侧边菜单答案

【问题标题】：Top Menu instead of side menu in Blazor from WebAssembly template in VS2019VS2019 中 WebAssembly 模板中 Blazor 中的顶部菜单而不是侧边菜单
【发布时间】：2021-03-22 09:44:54
【问题描述】：

我已经阅读并研究了一个类似的问题Blazor template with menu across the top，但是我仍然不明白为什么在 Visual Studio 中使用 Blazor 模板不容易实现简单的顶部菜单。我在 MainLayout.razor 中使用这个简单的代码来测试运行代码时容器的外观：

@inherits LayoutComponentBase

<div class="container-fluid">
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
        <!--<NavMenu />-->
    </nav>
</div>

我什至注释掉了 NavMenu.razor，但导航栏仍然没有延伸到整个页面。

看起来 Blazor 模板默认仍不支持顶部导航菜单？

【问题讨论】：

标签： twitter-bootstrap visual-studio-2019 blazor

【解决方案1】：

我看到你的组件NavMenu被注释掉了，请取消注释看看是否有效，代码应该是这样的：

<div class="container-fluid">
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
        <NavMenu />
    </nav>
</div>

如果不是这样，请按照以下说明操作：

所以这与 Blazor 无关，而是 HTML/CSS，当您使用 Bootstrap 时，您可以从这里获得帮助：https://getbootstrap.com/docs/4.5/components/navbar/

基本上，您可能需要更改 NavMenu 组件中的 HTML 以匹配上述引导链接中的 HTML，您可以使用那里的任何示例代码，例如：https://getbootstrap.com/docs/4.5/components/navbar/#nav

【讨论】：

实际上这就是我将其注释掉的原因——它对 NavMenu.razor 的宽度没有影响，不会在页面上扩展。似乎 app.css 中包含的代码必须从模板中修改，以使其工作为 "The Blazor 模板的样式表是为这种特定的类似 Explorer 的布局而构建的" 。我希望有一个更简单的解决方案，但到目前为止还没有找到任何东西。
同意你的观点，你将不得不改变一些 HTML 和 css，这就是让这种改变变得容易与否的“方法”。