Bootstrap 5中的导航栏下拉菜单(折叠)存在功能异常问题
<p>我在尝试使用<code>Bootstrap 5</code>创建响应式菜单或下拉按钮时遇到了一个问题。一切似乎都没问题。导航图标和下拉图标都显示出来了。但是它们不起作用。当我点击<code>nav</code>图标或<code>dropdown</code>按钮时,没有出现<code>dropdown菜单</code>。</p>
<p>我想特别提到的是,我还包含了<code>jquery</code>文件。但它没有起作用。有人可以告诉我这里发生了什么吗?</p>
<p>最后一件事,我在使用其他一些<code>bootstrap</code>类(如<code>mr-auto</code>,<code>ml-auto</code>等)时遇到了严重的问题。这是一个bug还是<code>bootstrap 5</code>引入了新的类来完成这种工作?</p>
<p><strong>以下是我的代码:</strong></p>
<p><br /></p>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
<a href="#" class="navbar-brand">DemoTech</a>
<button
class="navbar-toggler"
data-toggle="collapse"
data-target="#navbar"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbar" navbar>
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
</div>
</nav>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"
></script>
</body>
</html></pre>
<p><br /></p>