如何解决.NET 6 Blazor项目中Bootstrap下拉菜单无法展开的问题

阿华AIGC实验室

2026-4-27

解决Blazor .NET 6中Bootstrap下拉菜单无法展开的问题

嘿，我之前在Blazor项目里也踩过这个坑！你的下拉菜单点了没反应，主要是两个常见原因：Bootstrap的JavaScript文件没正确引入，或者用了Bootstrap 4的旧属性写法（而你可能用的是Bootstrap 5）。下面一步步给你解决：

1. 确认Bootstrap的CSS和JS都已正确引入

Blazor默认不会自动包含Bootstrap的JS，而下拉菜单这类交互组件必须依赖它的JS（还有Popper.js，Bootstrap 5的bundle版本已经包含了）。

根据你的项目类型（WebAssembly/Server），找到对应的入口文件：

Blazor WebAssembly：编辑wwwroot/index.html
Blazor Server：编辑Pages/_Layout.cshtml

在<head>里确保有Bootstrap的CSS：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

在</body>结束前添加Bootstrap的JS bundle：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

2. 更新Bootstrap的属性写法

如果你用的是Bootstrap 5，它已经把旧的data-toggle改成了data-bs-toggle（带bs前缀，避免命名冲突）。你的代码里还是用的旧属性，所以JS识别不了。

把下拉按钮的代码改成这样：

<div class="dropdown">
    <a class="btn btn-secondary dropdown-toggle" role="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Manage
    </a>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>

3. （可选）手动初始化下拉菜单（针对特殊情况）

如果上面两步做了还是没反应，可能是Blazor的DOM渲染时机和Bootstrap的初始化时机不匹配。你可以在组件里手动初始化下拉菜单：

首先在组件顶部注入IJSRuntime：

@inject IJSRuntime JSRuntime

然后在OnAfterRenderAsync方法里初始化：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        // 初始化指定ID的下拉菜单
        await JSRuntime.InvokeVoidAsync("new bootstrap.Dropdown", "dropdownMenuButton");
    }
}

这样应该就能解决下拉菜单不展开的问题了！

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