下拉菜单控件依赖于第三方 Popper.js插件实现，Popper.js插件提供了动态定痊和viewport浏览器窗口大小监测，使用时请确保popper.min.js 文件放在Bootstrap JS之前，或者使用 bootstrap.bundle.min.js / bootstrap.bundle.js这两个文件，因为这两个文件中已经包含了Popper.js。
使用bootstrap.bundle.min.js这个文件，下拉按钮需要点击两次才出现下拉菜单，不知道哪有问题。
因为bootstrap.bundle.min.js / bootstrap.bundle.js已经包含了Popper.js，所以引入bootstrap.bundle.min.js就不用再引入bootstrap.min.js，之所以点击两次，是因为同时引入了bootstrap.bundle.min.js和bootstrap.min.js
将下拉列表的切换（按钮或链接）和下拉菜单包含在.dropdown中，或者另外声明position: relative;元素;可以从<a> 或 <button>触发下拉菜单，以适应你的使用的需求。
任何一个 .btn块都可以定义变更为下拉菜单，下面是两个使用<button> 元素做下拉菜单的示例。
使用 <a> 标签的下拉菜单：(打开)
还可以自由引用.btn-primary.btn-danger等颜色及样式类来定义下拉菜单的外在表现：
同样，可用与单个按钮下拉菜单近似的标记创建分裂式下拉菜单，注意添加了.dropdown-toggle-split -插入此符号为下拉选项作适当的间隔（距）处理。
我们使用这个额外的Class样式，将插入符号两边水平padding减少了25%，并移除了为默认下拉菜单添加的 margin-left 属性，这些额外的更改将插入符号集中在分裂式按钮中，并在主按钮旁边提供了适合的点击空间。
卡片支持多种多样的内容，包括图片、文本、列组、链接等，混合并匹配多种内容类型以创建你想要的卡片。
增加.dropup 样式，使下拉菜单向上展开。
通过将 .dropright添加到父元素来触发元素左侧的下拉菜单。
通过将 .dropleft 添加到父元素来触发元素左侧的下拉菜单。
你可以创建非交互式下拉菜单项 .dropdown-item-text. 还可以随意使用定制的CSS或文本实用程序进一步设计样式.
加上 .active 让下拉列表中的项 样式为active.
加上.disabled 让下拉列表中的项 样式为不可用.
默认情况下，一个下拉菜单自动从顶部和左侧的父级100％定位。添加.dropdown-menu-right 到.dropdown-menu右侧轻松对齐下拉菜单。
如果你想使用响应式对齐，请通过添加data-display="static"属性禁用动态定位，并使用响应式变体类。
为了下拉菜单 右对齐和给定断点或更大的断点, 加上.dropdown-menu{-sm|-md|-lg|-xl}-right.
注意，你不需要添加 data-display="static"属性设置为导航栏中的下拉按钮，因为导航条中不使用Popper.js.
为了下拉菜单 左对齐和给定断点或更大的断点,加上.dropdown-menu-right 和 .dropdown-menu{-sm|-md|-lg|-xl}-left.
添加标题来标记任何下拉菜单中的操作部分。
在文本下拉菜单中放置任何自由格式的文本并使用间隔工具。请注意，您可能需要额外的大小调整样式来限制菜单宽度。
将表单放在下拉菜单中，或将其放入下拉菜单中，并使用margin 或 padding 通用CSS样式调整空间和位置。
使用data-offset或data-reference更改下拉菜单的位置。
https://code.z01.com/v4/components/dropdowns.html