尝试使用 Bootstrap 5 创建响应式菜单或下拉按钮时遇到问题.一切似乎都正常。导航图标和下拉图标出现。但它不起作用。当我点击 nav图标或 dropdown按钮，否 dropdown menu出现。
我想特别提一下，我还包括了jquery文件。但它没有用。谁能告诉我这里发生了什么？
最后一件事，我与其他一些人遇到了严重的问题bootstrap类如 mr-auto , ml-auto等等。bootstrap 5 是否有任何错误或新类？对于这种工作？
这是我的代码:
<!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>最佳答案
data-* Bootstrap 4 中使用的属性已替换为 data-bs-*在 Bootstrap 5
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
如explained in the docs ，所有 JavaScript 插件的数据属性现在都已命名，以帮助将 Bootstrap 功能与第三方和您自己的代码区分开来。这意味着任何 javascript 组件(Collapse、Navbar、Carousel、Dropdown、Tabs、Modal 等)都只能使用
data-bs-...属性。Bootstrap 5 是 breaking changes 的主要更新。 .还有see here那
ml-auto/mr-auto已更改为 ms-auto/me-auto .
关于javascript - 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65341620/