极客观点
项目管理
HarmonyOS
所以我使用 Django 来提供网页服务。
我正在努力确保我能够下载所有必要的资源，以使网页能够按预期 离线使用（因为其中一个资源可能无法供我的客户请求，所以我希望能够拥有我的服务器提供这些文件）。其中之一是 bootstrap 5。
我正在尝试使用他们的 下拉菜单功能……根据他们的文档：
"Dropdowns are built on a third party library, Popper, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper. Popper isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required."因为我非常想找到解决方案，所以我插入了一堆
<script>标签试图排除问题……也许这是个坏主意。
综上所述，我一直无法弄清楚。帮助 ：） ？
请让我知道如何改进这个问题。先感谢您！
{% load static %}
<html class="w-100 h-100">
<head>
<title>
Fonts
</title>
<!--Important meta tags-->
<!--Cancel zoom for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!--example:-->
<!--href="{% static 'polls/style.css' %}"-->
<!--theme-->
<link rel="shortcut icon" type="image/jpg" href="{% static 'Pages/favicons/CES.png' %}"/>
<link type="text/css" rel="stylesheet" href="{% static 'Pages/css/main.css' %}">
<script src="{% static 'Pages/js/main.js' %}"></script>
<!--jQuery-->
<script src="{% static 'Pages/jQuery/jquery-3.6.0.js' %}"></script>
<script src="{% static 'Pages/jQuery/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'Pages/jQuery/jquery-3.6.0.slim.js' %}"></script>
<script src="{% static 'Pages/jQuery/jquery-3.6.0.slim.min.js' %}"></script>
<!--bootstrap related-->
<link type="text/css" rel="stylesheet" href="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/css/bootstrap.css' %}">
<link type="text/css" rel="stylesheet" href="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/css/bootstrap.min.css' %}">
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.bundle.js' %}"></script>
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.js' %}"></script>
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.min.js' %}"></script>
<style>
{% if fonts %}
{% for font in fonts %}
@font-face
{
{% if font.font_family %}
font-family: "{{font.font_family}}";
{% endif %}
{% if font.path %}
src: url("{{font.path}}");
{% endif %}
}
{% endfor %}
{% endif %}
</style>
</head>
<body class="m-0 p-0 w-100 h-100">
<button id="fonts" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Fonts</span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="fonts">
{% if fonts%}
{% for font in fonts %}
<li><div class="dropdown-item" style="font-family: '{{font.font_family}}'; text-align: center;">{{font.font_name}}</div></li>
{% endfor %}
{% endif %}
</ul>
</body>
</html>
进一步阅读（来自 http://5.9.10.113/65685854/dropdown-button-in-bootstrap-5-not-working ）表明新版本的 Popper 实际上是导致问题的原因……所以……我会再调查一下，看看我能做些什么。
编辑答案：
出于测试目的，我从 bootstrap 的下载页面添加了这个片段，它按预期工作。从这里开始，我遍历了我所有的 bootstrap 资源（更不用说我折叠并添加了 Popper CDN），然后发现我的 bootstrap.js 文件有问题。从 npm 获取它的最新发行版（并将构建放入一个子目录中供我使用）后，我也通过 npm 将 Popper CDN 换成了它的对应版本（我下载了它，进入了 node_modules/@popper/core/… ，找到 min 文件并引用它），现在它就像一个魅力……最后值得一提的是： 仅使用 .MIN。文件！ \* 所以 popper.min.js、bootstrap.min.js、bootstrap.min.css… 将所有其他文件放在 script 标签中将导致引导程序无法正常运行。
<html class="w-100 h-100">
<head>
<title>
Menu
</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</head>
<body class="m-0 p-0 w-100 h-100">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</body>
</html>
原文由 Shmack 发布，翻译遵循 CC BY-SA 4.0 许可协议
每次应显示弹出窗口时，我都会收到此错误 (
TypeError: i.createPopper is not a function)。以前我不得不使用 Separate Popper 和 Bootstrap JS（选项 2）——因为与其他 scrips 有冲突。然而，这在我的项目中不再需要，使用 Bootstrap 5.1.1。仅包括带有 popper 的 Bootstrap 包 - 根据@Kevin 上面的评论 - 为我解决了这个问题 - 之前的冲突似乎不再是问题了。所有弹出窗口、工具提示、模态框、侧边栏等现在似乎都可以正常工作：