Bootstrap dropdown组件无法正常下拉展开问题求助

下拉菜单无法展开是几个典型配置错误直接导致的：

• 版本混用冲突：你引入的CSS是Bootstrap v4.3.1版本，JS文件却用的是v3.3.5版本，Bootstrap跨大版本的组件API、DOM结构、事件绑定逻辑完全不兼容，混用后组件根本无法识别触发规则。
• 前置依赖缺失：Bootstrap v4的所有JS交互组件（包括dropdown）都必须依赖jQuery和Popper.js才能运行，你的代码没有引入这两个依赖库，Bootstrap的交互逻辑完全没有执行基础。
• 额外不规范点：你把JS文件放到了head标签里，有可能出现DOM未加载完成就执行初始化的问题，进一步提升组件失效概率。

按要求调整配置即可恢复功能：

1. 统一Bootstrap的CSS、JS文件为同一大版本，不要跨大版本混用不同发布版的Bootstrap资源
2. 严格按照加载顺序引入脚本：先加载jQuery，再加载Popper.js，最后加载Bootstrap的JS文件，顺序颠倒会直接导致依赖报错
3. 把所有script标签移到</body>闭合标签之前，等页面DOM渲染完成后再加载交互脚本，避免初始化时机异常

<!DOCTYPE html>
<html>
<head>
  <title>Web Dev Test</title>
  <link rel="stylesheet" href="/static/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
<body>
  <header>
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>
  </header>
  <!-- 按依赖顺序在页面底部加载脚本 -->
  <script src="/static/jquery/jquery-3.3.1.min.js"></script>
  <script src="/static/popper/popper.min.js"></script>
  <script src="/static/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Patrick Abbey