导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用 [英] Navbar dropdown (collapse) is not working in Bootstrap 5

查看：18 发布时间：2021/9/11 18:49:32 javascript html css twitter-bootstrap bootstrap-5

本文介绍了导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在尝试使用 Bootstrap 5 创建响应式菜单或下拉按钮时遇到问题.一切看起来都不错.导航图标和下拉图标出现.但它不起作用.当我点击 nav 图标或 dropdown 按钮时，没有 dropdown menu 出现.

我想特别提到的是，我还包含了 jquery 文件.但它没有用.谁能告诉我这里发生了什么?

最后一件事，我遇到了其他一些bootstrap类的严重问题，比如mr-auto、ml-auto等.bootstrap 5 为这种工作提供了错误或新类?

这是我的代码:

<html lang="zh-cn"><头><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>引导程序</title><链接href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"rel="样式表"完整性="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"crossorigin =匿名"/><身体><nav class="navbar navbar-dark bg-dark navbar-expand-md"><a href="#" class="navbar-brand">DemoTech</a><按钮类=导航栏切换器"数据切换=折叠"数据目标=#navbar"><span class="navbar-toggler-icon"></span><div class="navbar-collapse collapse" id="navbar" 导航栏><ul class="navbar-nav"><li class="nav-item"><a href="#" class="nav-link">首页</a></li><li class="nav-item"><a href="#" class="nav-link">关于</a></li><li class="nav-item"><a href="#" class="nav-link">联系方式</a></li>

</nav><脚本src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"完整性="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"crossorigin =匿名"></脚本></html>

解决方案

Bootstrap 4 中使用的 data-* 属性已被替换为 data-bs-*引导程序 5

演示

正如在文档中解释，所有 JavaScript 插件的数据属性现在都已命名帮助区分 Bootstrap 功能与第三方和您自己的代码.这意味着任何 javascript 组件(折叠、导航栏、轮播、下拉菜单、标签、模态等)只能使用 data-bs-... 属性.

Bootstrap 5 是重大更新，具有重大更改.另外见这里那个ml-auto/mr-auto 已更改为 ms-auto/me-auto.

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.

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?

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?

Here is my code:

<!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>

解决方案

The data-* attributes used in Bootstrap 4 have been replaced with data-bs-* in Bootstrap 5

<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
    <span class="navbar-toggler-icon"></span>
</button>

Demo

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, Navbar, Carousel, Dropdown, Tabs, Modal, etc..) will only work using data-bs-... attributes.

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屋！

查看全文

导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用 [英] Navbar dropdown (collapse) is not working in Bootstrap 5

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用 [英] Navbar dropdown (collapse) is not working in Bootstrap 5

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭