bootstrap 5下拉菜单在电子应用程序中不起作用

Question

所以我正在构建一个基于电子的应用。我使用了一些引导花哨但不复杂的组件，它们都工作得很好。然后我需要使用下拉按钮…更具体地说，这个例子下拉菜单Bootstrap 5.2只是试图复制粘贴示例作为试验，但它只是没有工作(没有打开菜单)

这是我的html中的按钮

<div class="input-group mb-3">
<span class="input-group-text key" id="basic-addon1">Pack type</span>
<button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">PVC/Clear</a></li>
<li><a class="dropdown-item" href="#">PVC/PVDC</a></li>
<li><a class="dropdown-item" href="#">PVC/Aclar</a></li>
<li><a class="dropdown-item" href="#">PVC/PE/PVDC</a></li>
<li><a class="dropdown-item" href="#">ALU/ALU</a></li>
<li><a class="dropdown-item" href="#">Glass bottle clear</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">PVC/Clear - white</a></li>
<li><a class="dropdown-item" href="#">PVC/PVDC - white</a></li>
<li><a class="dropdown-item" href="#">PVC/Aclar - white</a></li>
<li><a class="dropdown-item" href="#">PVC/PE/PVDC - white </a></li>
<li><a class="dropdown-item" href="#">ALU/ALU - white </a></li>
<li><a class="dropdown-item" href="#">Glass bottle clear - white </a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Amber glass bottle</a></li>
<li><a class="dropdown-item" href="#">Glass ampule clear</a></li>
<li><a class="dropdown-item" href="#">Glass ampule amber</a></li>
</ul>
<input type="text" class="form-control inputs input" aria-label="Username" aria-describedby="basic-addon1">
</div>   

我搜索了一些可能的解决方案，我遇到了一些答案，说可以尝试以下方法:

1. 包含jQuery(因为我没有在第一个地方:D)
2. 将jQuery降级到3.5.1。
3. 试图下载并包含popper.js库，这里解释使用popper.js

都得到了相同的结果。没有菜单显示。希望这里有人能有所帮助。提前谢谢。

Answer 1

**感谢@ juliendsammond **

尝试不同的引导文件后。问题最终通过添加

解决了。

<script src="./css/bootstrap-5.2.0-dist/js/bootstrap.bundle.js"></script>

到HTML(更具体地说…使用bootstrap.bundle.js，而不仅仅是bootstrap.js，因为它包含了Popper.js。