html - Bootstrap 导航栏下拉菜单
问题描述
自从我使用 Bootstrap 并试图让我的 NavBar 切换下拉列表以来,这已经是很热的一分钟了。我在这里查看了所有引导文档和其他论坛。有什么我想念的吗?
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Links</a>
<div class="dropdown-menu">
<a class="dropdown-item">Edit</a>
<a class="dropdown-item">Delete</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Categories</a>
<div class="dropdown-menu">
<a class="dropdown-item">Edit</a>
<a class="dropdown-item">Delete</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
User
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Manage</a>
</div>
</li>
</ul>
解决方案
确保正确插入引导库并确保导航内容 ID 等于目标
<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">
<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>
<nav class="navbar navbar-expand-lg navbar-light bg-light"role="navigation">
<a class="navbar-brand" href="#"role="navigation">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Links</a>
<div class="dropdown-menu">
<a class="dropdown-item">Edit</a>
<a class="dropdown-item">Delete</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Categories</a>
<div class="dropdown-menu">
<a class="dropdown-item">Edit</a>
<a class="dropdown-item">Delete</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
User
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Manage</a>
</div>
</li>
</ul>
推荐阅读
- android - 未附加适配器:使用 Kotlin Framents 跳过布局
- linux - Mono - 在 Linux 下获取磁盘分区
- ios - 我有 macOS catalina,当我在终端中运行“gem install curl”时出现错误
- android - 如何在 Android 工具栏中填充右汉堡按钮?
- javascript - 无法从我的组件访问我的商店对象
- android - 在Android的Activity中调用不同的Fragment函数
- python - 捕获视频帧时的 Python OpenCV 内存问题
- angular - 无法绑定到“formGroup”,因为它不是 ionic 中“form”的已知属性
- node.js - 如何验证 Patreon 的 webhook 消息?
- ruby - Ruby中面向对象的Minimax算法