<分区>
<分区>
我正在从 w3schools 学习 bootstrap。
有一个菜单在屏幕较小时变成可折叠菜单的例子:W3Schools Example
我确实一对一地复制了它，但它不起作用，不知道为什么( Bootstrap 本身工作正常)。
具体情况是菜单链接隐藏在按钮下，但当我单击它时它不会打开。
另外，我想在此处添加 justify-content-center <nav>但正如我所见，在将此类名称添加到 <nav> 后，它甚至打破了这个 w3schools 片段中的菜单
你们能帮我解决这个问题吗？
这是我的整个页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Home</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
最佳答案
您需要包含 Bootstrap 正常运行所需的所有 JavaScript 文件，包括 bootstrap.js、jquery 和 popper。请务必在结束正文标记之前包含此代码。
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
这是一个工作示例: https://jsfiddle.net/uwzm82do/
关于html - Bootstrap 可折叠菜单无法打开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53972975/