导航栏下拉菜单在Bootstrap 5中不起作用 [英] Navbar dropdown Menu is not working in Bootstrap 5
问题描述
尝试使用Bootstrap 5创建响应式菜单或下拉按钮时遇到问题.一切似乎都正常.下拉图标apears.但是它不起作用.当我单击nav图标或dropdown按钮时，没有dropdown menu apears.
I am facing a issue when trying to create a responsive menu or dropdown button with Bootstrap 5.Everything seems ok.The navigation icon & dropdown icon apears.But its not working.When I clicked the nav icon or dropdown button,no dropdown menu apears.
我要特别提及的是，我还包括了jquery文件.但这没有用.谁能告诉我这里发生了什么事?
I want to specially mention that I also included the jquery file. But it didn't work. Can anyone please tell me what is happening here?
最后一件事，我遇到了一些其他bootstrap类(例如mr-auto，ml-auto等)的严峻问题.bootstrap 5是否有任何错误或新类用于此类工作?
One last thing,I faced severel issues with some others bootstrap classes like mr-auto,ml-auto etc.Is it any bug or new classes come with bootstrap 5 for this kind of job?
这是我的代码:
<!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>
推荐答案
在 Bootstrap 5
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
正如在文档中解释的那样，所有JavaScript插件的数据属性现在都已命名空间可帮助将Bootstrap功能与第三方和您自己的代码区分开.这意味着任何JavaScript组件(折叠，轮播，下拉列表，制表符，模态等)都只能使用data-bs-...属性来工作.
As explained in the docs, data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. This mean any javascript components (Collapse, Carousel, Dropdown, Tabs, Modal, etc..) will only work using data-bs-... attributes.
Bootstrap 5是一个主要更新，其中包含重大更改 .另外，请参见此处，该ml-auto/mr-auto已更改为ms-auto/me-auto.
Bootstrap 5 is a major update with breaking changes. Also see here that ml-auto/mr-auto have changed to ms-auto/me-auto.
这篇关于导航栏下拉菜单在Bootstrap 5中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
