Bootstrap导航头部移动端无法下拉展开问题求助

我用Bootstrap构建的导航头部在移动设备上无法实现下拉展开功能，已经引入了所需的JS和CSS文件，但始终找不到问题根源，恳请各位帮忙排查。另外代码中的路径前缀“/”已替换为atproducts.xyz（避免触发垃圾信息过滤器），相关代码如下：

<!DOCTYPE html>
<html>
<head>
 
    <link rel="stylesheet" href="atproducts.xyz/static/nav.css"> <!--secondary bootstrap code-->
    <link rel="stylesheet" href="atproducts.xyz/static/bootstrap.css">   
    <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>  
</head>
<body>
 
<header>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="atproducts.xyz/link">Link</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="atproducts.xyz/link">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Link</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="atproducts.xyz/link">Paid Services</a></li>
            <li><a class="dropdown-item" href="atproducts.xyz/link">Flash Documentation</a></li>
            <li><a class="dropdown-item" href="atproducts.xyz/link">SMS Bomb</a></li>
            <li><a class="dropdown-item" href="atproducts.xyz/link">MDickie Projects</a></li>
            <li><a class="dropdown-item" href="atproducts.xyz/link">BxPP</a></li>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Link</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="atproducts.xyz/link">Link</a></li>
            <li><a class="dropdown-item" href="atproducts.xyz/link">Link</a></li>
            <li><a class="dropdown-item" href="atproducts.xyz/link">Link</a></li>
            <li><a class="dropdown-item" href="atproducts.xyz/link">Link</a></li>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Link</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="atproducts.xyz/link">Link</a></li>
            <li><a class="dropdown-item" href="atproducts.xyz/link">Link</a></li>
            <li><a class="dropdown-item" href="atproducts.xyz/link">Link</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
    </header>
</body>
</html>

内容的提问来源于stack exchange，提问作者Alex Toucan