【发布时间】：2021-06-11 02:43:21
【问题描述】：
我正在尝试使用 bootstrap 4 构建响应式导航栏，如果屏幕尺寸减小了某个像素宽度，导航栏会显示切换按钮，我可以显示切换按钮但我无法显示当我点击切换按钮时的链接项目我不知道为什么会发生这种情况我也尝试过 jquery 脚本，然后是引导链接、popper 脚本，最后是引导脚本，但之后仍然没有显示导航项目点击切换按钮谁能帮我解决这个问题。
这是我在标题中添加的代码
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Nav Bar</title>
</head>
这是我在正文中添加的代码
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">TarotByPoonam</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Appointment</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shopping</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Feedback</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Photos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About me</a>
</li>
<button type="submit" class="rounded btn btn-danger">Logout</button>
</ul>
</div>
</div>
</nav>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
</script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
【问题讨论】：
标签： jquery css bootstrap-4 toggle jquery-mobile-navbar