Blazor 客户端项目中的引导导航项目未正确呈现答案

【问题标题】：Bootstrap nav items not rendering correct in Blazor client projectBlazor 客户端项目中的引导导航项目未正确呈现
【发布时间】：2021-04-16 21:17:42
【问题描述】：

代码中的引导导航项在 Blazor 客户端项目中未正确对齐。我正在使用Blazor template with menu across the top 中描述的技术，但仍然遇到这个问题。这是 NavMenu.razor：

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark
     border-bottom box-shadow mb-3 fixed-top">
    <div class="container">
        <a class="navbar-brand text-light" asp-area="" asp-page="/Index">Top Menu</a>
        <button class="navbar-toggler" @onclick="ToggleNavMenu" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="@NavMenuCssClass navbar-collapse d-sm-inline-flex flex-sm-row-reverse" @onclick="CollapseNavMenu">
            <ul class="navbar-nav flex-grow-0">
                <li class="nav-item">
                    <a class="nav-link text-light" href="" Match="NavLinkMatch.All">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-light" href="counter">Counter</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-light" href="fetchdata">Fetch data</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

MainLayout.razor：

@inherits LayoutComponentBase

<header>
    <NavMenu />
</header>

<body>
    <div class="container">
        @Body
    </div>
</body>

我尝试修改 nav-item 的 site.css 文件，并尝试删除它们的所有定义，但仍然出现此行为：

【问题讨论】：

更正 -- 这是一个 blazor 服务器端应用程序 -- 不是 wasm

标签： css twitter-bootstrap asp.net-core visual-studio-2019 blazor

【解决方案1】：

经过大量研究，我能够通过注释掉_Host.cshtml 中的.css 链接标签来解决这个问题。要注释掉的.css文件是<link href="[Nameofproject].styles.css" rel="stylesheet" />

【讨论】：