如何在Blazor应用中安装Popper.js以激活Bootstrap 5下拉菜单

Bootstrap 5的下拉组件依赖Popper.js实现定位逻辑，但官方已经将Popper的核心功能集成到了Bootstrap的打包JS文件中，无需单独引入Popper.js。以下是VS 2022社区版中快速解决问题的步骤：

1. 补全Bootstrap的JS引入 #

根据你的Blazor项目类型，在对应文件中添加完整的Bootstrap资源链接：

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

添加以下代码（放在页面底部</body>标签前）：

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<!-- 集成了Popper的Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

2. 优化下拉菜单按钮代码 #

移除下拉项按钮的type="submit"属性（避免意外触发表单提交），并添加文本左对齐样式：

<div class="dropdown">
    <button type="button" title="Print" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
        <i class="bi bi-printer"></i>
    </button>
    <ul class="dropdown-menu">
        <li><button id="print-1" class="btn btn-link border-0 text-start" @onclick="() => Print(AppliedReporting.ReportType.Preview)">Preview</button></li>
        <li><button id="print-2" class="btn btn-link border-0 text-start" @onclick="() => Print(AppliedReporting.ReportType.PDF)">PDF</button></li>
        <li><button id="print-3" class="btn btn-link border-0 text-start" @onclick="() => Print(AppliedReporting.ReportType.Excel)">Excel</button></li>
        <li><button id="print-4" class="btn btn-link border-0 text-start" @onclick="() => Print(AppliedReporting.ReportType.Word)">Word</button></li>
        <li><button id="print-5" class="btn btn-link border-0 text-start" @onclick="() => Print(AppliedReporting.ReportType.HTML)">HTML</button></li>
    </ul>
</div>

3. 重启项目验证 #

保存所有修改后，重启Blazor项目，点击下拉按钮即可正常展开菜单。

之前方法失败的原因 #

• 单独复制Popper.js文件易出现版本不匹配问题，且未配合Bootstrap JS使用；
• 第三方Blazor.Popper框架增加了不必要的复杂度，官方集成方案更可靠；
• 仅引入Bootstrap CSS缺少交互逻辑所需的JS文件，下拉菜单无法触发展开动作。

内容的提问来源于stack exchange，提问作者Mohammad Aamir Jahangir