There is a functional issue with the navigation bar drop-down menu (collapse) in Bootstrap 5
P粉322319601
2023-08-22 20:42:45
<p>I ran into an issue while trying to create a responsive menu or dropdown button using <code>Bootstrap 5</code>. Everything seems to be fine. Navigation icons and drop-down icons are displayed. But they don't work. When I click the <code>nav</code> icon or the <code>dropdown</code> button, the <code>dropdown menu</code> does not appear. </p>
<p>I want to specifically mention that I also included the <code>jquery</code> file. But it didn't work. Can someone tell me what's going on here? </p>
<p>One last thing, I'm using some other <code>bootstrap</code> classes (like <code>mr-auto</code>, <code>ml-auto</code> etc. ) encountered a serious problem.Is this a bug or does <code>bootstrap 5</code> introduce new classes to do this kind of job? </p>
<p><strong>Here is my code: </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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
In Bootstrap 5, the
data-*attribute used in Bootstrap 4 has been replaced withdata-bs-*<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar"> <span class="navbar-toggler-icon"></span> </button>Demo
As explained in the documentation , all JavaScript plugin data attributes are now namespaced to help differentiate Bootstrap functionality from third-party and your own code. This means that any javascript component (collapse, navbar, carousel, dropdown, tab, modal, etc.) can only use the
data-bs-...attribute.Bootstrap 5 is a major update with breaking changes. Additionally, View here,
ml-auto/mr-autohas been changed toms-auto/me-auto.