简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Bootstrap 5中的导航栏下拉菜单（折叠）存在功能异常问题
P粉322319601
P粉322319601 2023-08-22 20:42:45
0
1
715
<p>我在尝试使用<code>Bootstrap 5</code>创建响应式菜单或下拉按钮时遇到了一个问题。一切似乎都没问题。导航图标和下拉图标都显示出来了。但是它们不起作用。当我点击<code>nav</code>图标或<code>dropdown</code>按钮时，没有出现<code>dropdown菜单</code>。</p> <p>我想特别提到的是，我还包含了<code>jquery</code>文件。但它没有起作用。有人可以告诉我这里发生了什么吗？</p> <p>最后一件事，我在使用其他一些<code>bootstrap</code>类（如<code>mr-auto</code>，<code>ml-auto</code>等）时遇到了严重的问题。这是一个bug还是<code>bootstrap 5</code>引入了新的类来完成这种工作？</p> <p><strong>以下是我的代码：</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

全部回复(1)
P粉550257856
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
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！