所以我正在建立一个基于电子的应用程序。我使用了一些 Bootstrap 的花式,但不复杂的组件,他们都工作得很好。然后,我需要使用按钮与下拉菜单。。更具体地说,这个例子下拉菜单 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)
1.将jQuery降级到3.5.1。(在这里阅读downgrade tot jQuery 3.5.1)
1.我尝试下载并包含popper.js库,如此处所述use popper.js
都得到了同样的结果。。没有菜单显示。希望这里的人有一些有用的东西。提前感谢。
1条答案
按热度按时间dgiusagp1#
感谢@朱利安·德拉蒙德
在尝试不同的引导文件后..问题最终通过添加一个
到html(更具体地说..使用bootstrap.bundle.js,而不仅仅是bootstrap.js,因为它包括Popper.js在其中)。