Bootstrap 5中的导航栏下拉菜单（折叠）存在功能异常问题-PHP中文网问答

我在尝试使用Bootstrap 5创建响应式菜单或下拉按钮时遇到了一个问题。一切似乎都没问题。导航图标和下拉图标都显示出来了。但是它们不起作用。当我点击nav图标或dropdown按钮时，没有出现dropdown菜单。

我想特别提到的是，我还包含了jquery文件。但它没有起作用。有人可以告诉我这里发生了什么吗？

最后一件事，我在使用其他一些bootstrap类（如mr-auto，ml-auto等）时遇到了严重的问题。这是一个bug还是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 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>

全部回复(1)

P粉5502578562023-08-23 13:15:31 1楼

在Bootstrap 5中，Bootstrap 4中使用的data-*属性已被替换为data-bs-*

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

演示

如文档中所解释的，所有JavaScript插件的数据属性现在被命名空间化，以帮助区分Bootstrap功能与第三方和您自己的代码。这意味着任何javascript组件（折叠、导航栏、轮播、下拉菜单、选项卡、模态框等）只能使用data-bs-...属性。

Bootstrap 5是一个重大更新，带有重大变化。此外，在这里查看，ml-auto/mr-auto已更改为ms-auto/me-auto。

赞 +0

添加回复