.NET 8 Blazor中Bootstrap水平导航栏未对齐及下拉失效问题

针对你遇到的导航栏菜单项无法水平对齐、下拉功能失效的问题，按以下步骤排查修复：

1. 确保正确引入Bootstrap 5依赖的JavaScript文件 #

Bootstrap 5的下拉组件依赖Popper.js，必须按顺序引入这两个文件。根据你的Blazor项目类型，在对应入口文件中添加：

• WebAssembly项目：编辑wwwroot/index.html，在</body>前添加：

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
  

• Server项目：编辑Pages/_Layout.cshtml，在</body>前添加上述脚本。

如果使用本地静态文件，确保文件路径正确，且Popper.js在Bootstrap JS之前引入。

2. 移除默认NavMenu的冲突样式 #

新建Blazor项目自带的NavMenu.razor.css包含侧边栏布局的样式（如flex-column、固定定位等），会干扰顶部导航栏的水平布局。直接删除该文件，或清空其中所有内容。

3. 调整MainLayout的结构 #

将导航栏移出<main>标签，避免布局挤压导致菜单项垂直排列：

@inherits LayoutComponentBase

<PageTitle>BlazorApp</PageTitle>

<NavMenu />
<div class="page"> 
    <main>
        <article class="content px-8">
            @Body
        </article>
    </main>
</div>

4. 确认导航栏HTML结构的正确性 #

你的NavMenu.razor结构符合Bootstrap 5规范，但注意：

• 保留navbar-expand类（已添加），该类控制导航栏在非移动端水平展开；若需指定断点（如仅在中等屏幕及以上展开），可替换为navbar-expand-md等类。
• 确保dropdown-toggle标签的data-bs-toggle="dropdown"属性存在，且下拉菜单的结构完整。

完成以上步骤后，重新运行项目，导航栏菜单项应水平排列，下拉功能正常生效。

内容的提问来源于stack exchange，提问作者SteveJ