如何使我的切换导航按钮在BS5中工作?

Question

我想弄清楚为什么我的切换图标不显示，以及为什么当我使用移动视图时导航栏不显示菜单元素。我已经创建了一个边框，看看图标是否在那里，我可以看到红色的框架，但当我点击它，不工作，不显示任何内容。谁能帮帮我?

这是我到目前为止的代码:

<header>
<div class="jumbotron">
<div class="container text-center">
<div class="intro-video">
<video class="videobaner" id="video" preload autoplay="true" loop="loop" muted="muted" volume="0"> 
<source src="img/background.mp4" type="video/mp4"> 
<source type="video/webm" src="img/theremin2.mp4"></source>
</video>
</div>
</div>
</header>
<nav class="navbar navbar-expand-md" style="width:auto;background-color:black;">
<div class="container-fluid mb-2 mt-2">
<div class="navbar-collapse collapse flex justify-content-md-center">
<ul class="navbar-nav mr-auto align-center">
<li class="nav-item">
<a class="nav-link" href="music.php"> MUSIC </a>
</li>
<li class="nav-item">
<a class="nav-link" href="events.php"> EVENTS </a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">FEATURED</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="arts.php">ARTS</a></li>
<li><a class="dropdown-item" href="blog.php">BLOG</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SUBSCRIPTION </a>
</li>
</ul>
</div>
<div class="d-flex flex-md-fill flex-shrink-1 d-md-none">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapsenav">
<span class="navbar-toggler-icon"style="color:white;border:2px solid red;"></span>
</button>
</div>


</div>
</div>
</nav>
<style>
header .jumbotron{
position: relative;
background-color: black;
height: 100%;
min-height: 40rem;
width: 100%;
overflow: hidden;

}
nav {
opacity: 80%;
padding: 20px;
/* position: relative; */
z-index: 9999;
margin: 0;
width: 50%;
left: 0px;
right: 0px; 
bottom:0px;
border-radius: 1px;
color: white !important;
}
.container-fluid {
height:30px;
}
nav ul {
text-transform: uppercase;
padding:20px 35px;
margin: 0;
font-size: .450rem;
font-weight: 400;
color: white!important;
}
nav ul li {
display:inline-block;
text-align: center;
padding:20px 35px;
height: 1%;
}
nav ul a {
height:35px;
line-height:20px;
padding:16px 32px;
margin: 4px 2px;
color:white !important;
font-size: 20px;
letter-spacing: 2px;
font-weight: 700;
text-transform: uppercase;
text-decoration:none;
}
nav ul a:hover {
padding: 20px;
border-radius: 15px;
color: white!important;
}
</style>

Answer 1

Bootstrap5使用data-bs-toggle和data-bs-target作为切换器。把

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapsenav">
<span class="navbar-toggler-icon"style="color:white;border:2px solid red;"></span>
</button>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".collapsenav">
<span class="navbar-toggler-icon" style="color:white;border:2px solid red;"></span>
</button>

关于Bootstrap5切换器的更多信息