我正在尝试使用引导程序 4 构建响应式导航栏,如果屏幕尺寸减小了某些像素宽度,导航栏会显示切换按钮,我可以显示切换按钮但我无法显示链接项当我点击切换按钮时我不知道为什么会这样按钮任何人都可以帮我解决这个问题。
这是我在标题中添加的代码
<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>