问题描述
我正在尝试使用引导程序 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>
解决方法
您需要检查您是否正在阅读您正在使用的版本的文档。如果您查看此处 https://getbootstrap.com/docs/4.5/components/navbar/（注意 URL 中的版本），您将看到数据属性名称不包含在 v5 中添加的 'bs-' 部分。
改变这个：
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
致：
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
在您的 <button class="navbar-toggler"> 中，将 toggle 属性从 data-bs-toggle 更改为 data-toggle。
对您的 target 属性执行相同操作并从您的 bs
data-bs-target 部分
<!doctype html>
<htlm>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<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-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">
<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>
</htlm><!doctype html>
<htlm>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<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-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">
<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>
</htlm>