Blazor 导航栏未正确显示答案

【问题标题】：Blazor Navbar not displaying properlyBlazor 导航栏未正确显示
【发布时间】：2021-03-15 23:23:02
【问题描述】：

当我对这个 Visual Studio 2019 Blazor 应用程序进行编程时，我无法让导航栏在整个页面中展开。已尝试此代码的许多不同变体，但结果均失败。

我的 MainLayout.razor 页面：

@inherits LayoutComponentBase

<div>
    <NavMenu />
</div>
<div class="content px-4">
    @Body
</div>

我的 NavMenu.razor 页面：

<div class="container">
    <nav class="navbar bg-dark navbar-dark navbar-expand-sm">
        <div class="container">
            <div class="navbar-nav">
                <a class="nav-item nav-link" href="#">Schedule</a>
                <a class="nav-item nav-link" href="#">Other Stuff</a>
            </div>
        </div>
    </nav>
</div>

但是，当我运行应用程序时，导航栏显示如下：

【问题讨论】：

标签： twitter-bootstrap visual-studio blazor

【解决方案1】：

您可以尝试不将导航栏放入容器中，如下所示：

<nav class="navbar bg-dark navbar-dark navbar-expand-sm">
    <div class="container">
        <div class="navbar-nav">
            <a class="nav-item nav-link" href="#">Schedule</a>
            <a class="nav-item nav-link" href="#">Other Stuff</a>
        </div>
    </div>
</nav>

【讨论】：

其实我已经弄清楚，决定因素在 MainLayout.razor 代码中。我已将其更改为<div class="bg-danger container-fluid"> <NavMenu /> </div> <div class="content px-4"> @Body </div> 进行测试，警报几乎填满了整个页面，而容器中的导航栏山雀偏移 15 px ..

【解决方案2】：

如果您使用引导程序，您应该查看flex

@inherits LayoutComponentBase

<div class="d-flex flex-row">
    <NavMenu />
</div>
<div class="content px-4">
    @Body
</div>

<div class="navbar navbar-light flex-fill">
    <a class="nav-item nav-link" href="#">Schedule</a>
    <a class="nav-item nav-link" href="#">Other Stuff</a>
</div>

【讨论】：

不幸的是，这会产生相同的结果。我也通过更改为 navbar-dark 进行了仔细检查。

【解决方案3】：

我已将问题追溯到 MainLayout.razor 页面中的 css。由于这个问题已经偏离了我认为的原始问题，因此我将创建一个新问题，更加关注那段代码。

【讨论】：