导航栏下拉菜单（折叠）在 Bootstrap 5 中不起作用
Posted
技术标签:
【中文标题】导航栏下拉菜单（折叠）在 Bootstrap 5 中不起作用【英文标题】：Navbar dropdown (collapse) is not working in Bootstrap 5 【发布时间】：2021-09-23 05:20:19 【问题描述】：我在尝试使用 Bootstrap 5 创建响应式菜单或下拉按钮时遇到问题。一切正常。导航图标和下拉图标出现。但它不起作用。当我单击 nav 图标或 @ 987654325@按钮，没有dropdown menu apears。
我想特别提一下，我还包含了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 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>【问题讨论】：
您可以尝试使用导航栏引导程序 5.0 示例 getbootstrap.com/docs/5.0/components/navbar 并阅读迁移文档 getbootstrap.com/docs/5.0/migration 【参考方案1】：Bootstrap 4 中使用的 data-* 属性已在 Bootstrap 5
data-bs-*
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
Demo
作为 explained in the docs，所有 javascript 插件的数据属性现在都已命名，以帮助区分 Bootstrap 功能与第三方和您自己的代码。这意味着任何 javascript 组件（Collapse、Navbar、Carousel、Dropdown、Tabs、Modal 等）都只能使用 data-bs-... 属性。
Bootstrap 5 是breaking changes 的重大更新。还有see here 表示ml-auto/mr-auto 已更改为ms-auto/me-auto。
【讨论】：
这应该是公认的答案。官方文档（测试版）目前给出了一个错误的例子，它没有有命名空间data属性。
实际上官方文档 do 正确（当然）。我在 devdocs.io 上绊倒了，在那里我启用了 BS4 文档而不是 BS5 文档，所以要小心。
我从 Boostrap 5 文档示例代码中复制了导航栏，但我仍然需要更改它。【参考方案2】：
确保您已在 head 标记中为 Javascript 和 CSS 添加了来自引导主页的 jsDeliver CDN 链接。
**<!-- CSS only -->**
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
**<!-- JavaScript Bundle with Popper -->**
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
【讨论】：
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。【参考方案3】：<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
你已经使用了data-toggle 这个属性在旧的 Bootstrap 版本中使用，而在 Bootstrap 5 中你需要使用这个属性 data-bs-toggle 并且另一个最重要的事情是你已经做了 (aria-expanded="true")。
【讨论】：
【参考方案4】：我正在编辑的当前站点中的下拉菜单存在问题。今晚我终于有了一个带有下拉菜单的导航菜单，它允许在单击链接后关闭下拉菜单！我通过不同的模板将其设置为看起来很酷。但是，当我将菜单添加到正在编辑的站点时，移动切换菜单未打开。我该如何解决？谢谢！ :--)
<!-- ======= Header ======= -->
<header id="header" class="fixed-top d-flex align-items-center">
<div class="container">
<div class="header-container d-flex align-items-center justify-content-between">
<div class="logo">
<!--<h1 class="text-light"><a href="index.html">LOGO TEXT</a></h1>-->
<!-- Uncomment below if you prefer to use an image logo -->
<a class="scrollto" href="#intro"><img src="img/UCF-Logo.svg" title="U C F" class="img-fluid top-logo wow bounceOut"></a>
<!-- <a href="index.html"><img src="assets/img/logo.png" class="img-fluid"></a>-->
</div>
<nav id="navbar" class="navbar">
<ul>
<!--<li><a class="nav-link scrollto active" href="#hero">Home</a></li>
<li><a class="nav-link scrollto" href="#about">About</a></li>
<li><a class="nav-link scrollto" href="#services">Services</a></li>
<li><a class="nav-link scrollto " href="#portfolio">Portfolio</a></li>
<li><a class="nav-link scrollto" href="#team">Team</a></li>-->
<li class="dropdown"><a href="#"><span>About <i class="fas fa-arrow-down"></i></span></a>
<ul>
<li><a class="scrollto" href="#about">About</a></li>
<li><a class="scrollto" href="#more-about">Detailed Info</a></li>
<li><a class="scrollto" href="#about">DropDown 03</a></li>
<li><a class="scrollto" href="#about">DropDown 04</a></li>
<li><a class="scrollto" href="#about">DropDown 05</a></li>
</ul>
</li>
<li class="dropdown"><a href="#"><span>DropDown <i class="fas fa-arrow-down"></i></span></a>
<ul>
<li><a class="scrollto" href="#about">DropDown 06</a></li>
<li><a class="scrollto" href="#about">DropDown 07</a></li>
<li><a class="scrollto" href="#about">DropDown 08</a></li>
<li><a class="scrollto" href="#about">DropDown 09</a></li>
<li><a class="scrollto" href="#about">DropDown 10</a></li>
</ul>
</li>
<li class="dropdown"><a href="#"><span>DropDown <i class="fas fa-arrow-down"></i></span></a>
<ul>
<li><a class="scrollto" href="#contact">Contact Info</a></li>
<li><a class="scrollto" href="#about">DropDown 12</a></li>
<li><a class="scrollto" href="#about">DropDown 13</a></li>
<li><a class="scrollto" href="#about">DropDown 14</a></li>
<li><a class="scrollto" href="#about">DropDown 15</a></li>
</ul>
</li>
<!--<li><a href="#">Drop Down 2</a></li>
<li><a href="#">Drop Down 3</a></li>
<li><a href="#">Drop Down 4</a></li>
</ul>
</li>-->
<!--<li><a class="nav-link scrollto" href="#contact">Contact</a></li>-->
<li><a class="register scrollto" href="#about">REGISTER! <i class="fas fa-smile-beam fa-x2"></i></a></li>
</ul>
<i class="fas fa-bars mobile-nav-toggle"></i>
</nav><!-- .navbar -->
</div><!-- End Header Container -->
</div>
</header><!-- End Header -->【讨论】：
这不是原始问题的答案。将其作为新问题提出或使用评论部分，但不要发布新问题作为答案。 如果您有新问题，请点击 按钮提出问题。如果有助于提供上下文，请包含指向此问题的链接。 - From Review 我在此处发布的代码在我找到它的模板上运行良好，应该是 BS 5 模板。有人请复制/粘贴我的代码，并在该编码中添加可以提供帮助的内容。非常感谢！ :--)【参考方案5】：<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
【讨论】：
原来的问题是关于 Bootstrap v5，你的例子使用 4.3.1【参考方案6】：这里是 'data-bs-target' id
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#kickMyAss">
和 div id 必须相同
<div id="kickMyAss" class="collapse navbar-collapse">
【讨论】：
【参考方案7】：你使用 "data-toggle" 这个属性在 Bootstrap 3 中使用你需要使用这个属性 "data-bs-toggle"
【讨论】：
正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。以上是关于导航栏下拉菜单（折叠）在 Bootstrap 5 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
导航栏折叠在 Rails 5/Bootstrap 3 上不起作用