简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
There is a functional issue with the navigation bar drop-down menu (collapse) in Bootstrap 5
P粉322319601
P粉322319601 2023-08-22 20:42:45
0
1
644
<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>
P粉322319601
P粉322319601

reply all(1)
P粉550257856
P粉5502578562023-08-23 13:15:31 1 floor

In Bootstrap 5, the data-* attribute used in Bootstrap 4 has been replaced with data-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-auto has been changed to ms-auto/me-auto .

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！