导航栏下拉菜单（折叠）在Bootstrap5中不起作用

html5 • • 问答

我在尝试使用Bootstrap 5.Everything创建响应式菜单或下拉按钮时遇到问题。似乎一切正常。导航图标和下拉图标出现。但它不起作用。当我单击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>
            <a href="#">DemoTech</a>
            <button
               
               
               
            >
                <span></span>
            </button>

            <div navbar>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">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-*自举4使用的属性已被替换为data-bs-*在自举5

<button>
    <span></span>
</button>

演示

正如文档中所解释的，所有 JavaScript 插件的数据属性现在都进行了命名空间，以帮助将 Bootstrap 功能与第三方和您自己的代码区分开来。这意味着任何 javascript 组件（Collapse、Navbar、Carousel、Dropdown、Tabs、Modal 等）只能使用data-bs-...属性工作。

Bootstrap 5 是具有重大更改的重大更新。此外在这里看到的是/已更改为/ 。ml-automr-automs-autome-auto

  • This should be the accepted answer. The official docs (beta) currently give a wrong example which does _not_ have the namespaced `data` attributes.
以上是导航栏下拉菜单（折叠）在Bootstrap5中不起作用的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容