我网站上的下拉菜单拒绝工作，我看不出为什么。我已经浏览了这个网站和其他网站，并重新阅读了引导文档，但我不知道为什么它不起作用。它们不会下拉。我知道它们正在被单击，因为当我单击它们时，哈希符号将出现在 URL 中，但没有发生拖放动画。
下面是我的代码，带有头部和导航栏。
其他人能看出问题所在吗？
<head>
<title>Scott's Website</title>
<link rel="stylesheet" type="text/css" href="styles/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<script type="text/javascript" src="styles/bootstrap/css/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="styles/bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid bg-dark">
<div class="container bg-dark">
<div class="pl-3 pr-3 pt-3 pb-0 row bg-dark text-light">
<div class="col-9">
<h1>Scott McMullan</h1>
<div class="row pt-0 pb-0 pl-0 pr-3 bg-dark text-light">
<div class="col-9">
<h7 class="font-weight-light">Studying full time at Griffith University.</h7>
</div>
</div>
<div class="row pt-0 pb-3 pl-0 pr-3 bg-dark text-light">
<div class="col">
<h7 class="font-weight-light">Working towards a bachelor of Computer Science, majoring in Data Science & Artificial Intelligence.</h7>
</div>
</div>
<hr/>
<div class="row pt-0 pb-3 pl-0 pr-3 bg-dark text-light">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#">
<img src="icon.jpg" width="30" height="30" alt="mannaz" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link font-weight-bold" href="index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Experience
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Professional</a>
<a class="dropdown-item" href="#">Academic</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Academic Course Breakdown</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Projects
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Professional</a>
<a class="dropdown-item" href="#">Academic</a>
<a class="dropdown-item" href="#">Personal</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
您的下拉列表不起作用的原因是因为您没有加载 popper.js。弹出和下拉的所有内容都需要该文件。
此外，保持您的 HTML 尽可能有效总是一个好主意(您在此处发布的代码无效(。建议在底部加载js文件(而不是将它们加载到头部(。
这是工作代码(单击"运行代码片段"按钮并展开到全屏以验证它是否正常工作(：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid bg-dark">
<div class="container bg-dark">
<div class="pl-3 pr-3 pt-3 pb-0 row bg-dark text-light">
<div class="col-9">
<h1>Scott McMullan</h1>
<div class="row pt-0 pb-0 pl-0 pr-3 bg-dark text-light">
<div class="col-9">
<h7 class="font-weight-light">Studying full time at Griffith University.</h7>
</div>
</div>
<div class="row pt-0 pb-3 pl-0 pr-3 bg-dark text-light">
<div class="col">
<h7 class="font-weight-light">Working towards a bachelor of Computer Science, majoring in Data Science & Artificial Intelligence.</h7>
</div>
</div>
<hr/>
<div class="row pt-0 pb-3 pl-0 pr-3 bg-dark text-light">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#">
<img src="https://placehold.it/60" width="30" height="30" alt="mannaz" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link font-weight-bold" href="index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Experience
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Professional</a>
<a class="dropdown-item" href="#">Academic</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Academic Course Breakdown</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Projects
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Professional</a>
<a class="dropdown-item" href="#">Academic</a>
<a class="dropdown-item" href="#">Personal</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>其他人说的不是真的，我正在从本地文件加载波普尔.js。但是，没有加载的是jquery文件，因为我在本地拥有所有内容。
修复很简单，从 https://code.jquery.com/jquery-3.3.1.min.js 下载jquery源代码并将其与我的HTML链接到本地。
似乎您必须再次阅读引导文档：https://getbootstrap.com/docs/4.0/getting-started/introduction/
您正在使用的引导下拉列表需要波普尔.js可以在引言中找到快速入门> JS
Bootstrap 文档非常足智多谋。通常没问题 ;)
好吧，我自己学到了一些新东西：PopperJS实际上与bootstrap-4捆绑在一起。它只是隐藏在bootstrap.bundle中.js
不过，您必须包括它。正如我在上一个回答中所说：这一切都在文档中！
https://getbootstrap.com/docs/4.0/components/dropdowns/