【问题标题】：Bootstrap 5 dropdown menu failsBootstrap 5 下拉菜单失败
【发布时间】：2021-04-19 20:18:03
【问题描述】：
作为 Bootstrap 的新手，我一直在尝试编写带有下拉菜单的菜单。下面列出了代码，但我发现了一些问题：
- 菜单代码是从 GetBootstrap.com 文档中复制的。查看其他网站以了解问题可能出在哪里，尝试了替代方案，但没有成功。
- bootstrap.min.css 和 bootstrap.bundle.min.js，都是第 5 版，已链接到代码中。已直接在现场和通过链接尝试过这些文件。还尝试了 popper.js 加上 bootstrap.min.js；结果相同。
- 直接链接有效，但下拉部分无效。单击下拉项不会产生任何结果。如果它能够在悬停时显示并保持原位以便可以点击子项目，那就太好了。
- 菜单应位于屏幕右侧；查看答案，ms-auto 应该这样做。它没有。
- 当屏幕折叠到平板电脑或手机大小时，菜单会转到预期的压缩符号，但根本不起作用；点击时它不会显示任何内容。
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e6e6e6;">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="img/text835.png" width="160" height="48" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item" dropdown>
<a class="nav-link dropdown-toggle" href="#"
id="navbarConsultants" role="button" data-bs-toggle="dropdown"
aria-expanded="false">Consultants</a>
<ul class="dropdown-menu" aria-labelledby="navbarConsultants">
<li><a class="dropdown-item" href="#">Consultants</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Andy</a></li>
<li><a class="dropdown-item" href="#">Bill</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
【问题讨论】：
标签：
drop-down-menu
bootstrap-5
【解决方案1】：
dropdown 应该是一个类..而不是一个属性：
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e6e6e6;">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="//via.placeholder.com/160x48" width="160" height="48" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarConsultants" role="button" data-bs-toggle="dropdown"
aria-expanded="false">Consultants</a>
<ul class="dropdown-menu" aria-labelledby="navbarConsultants">
<li><a class="dropdown-item" href="#">Consultants</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Andy</a></li>
<li><a class="dropdown-item" href="#">Bill</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
Everything works as expected
【解决方案2】：
使用CDN整合Bootstrap 5.0.0-beta3资源，以下应该可以。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<title>Custom Navbar with <strong>Bootstrap 5.0.0-beta3</strong></title>
</head>
<body>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
-->
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e6e6e6;">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="img/text835.png" width="160" height="48" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarConsultants" role="button" data-bs-toggle="dropdown"
aria-expanded="false">Consultants</a>
<ul class="dropdown-menu" aria-labelledby="navbarConsultants">
<li><a class="dropdown-item" href="#">Consultants</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Andy</a></li>
<li><a class="dropdown-item" href="#">Bill</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</body>
</html>
希望对你有所帮助！
请随时为答案投票
【解决方案3】：
感谢 Manifest Man 和 Zim。我使用的是较早版本的 bootstrap 5，当使用最新版本的 bootstrap.min.css 和 bootstrap.bundle.min.js 时，它开始工作。
另外，是的，下拉是一个类，而不是一个属性。