我一般对引导和开发都是新手，在弄清楚这一点时遇到很多麻烦。当我单击时，为什么我的引导程序切换菜单不起作用。我希望它下拉并通过左侧的链接进行扩展。但是，当我单击它时，只有我的链接以透明背景为中心下拉。
.navbar {
background-color: black;
height:15%;
line-height: 280px;
}
li {
padding-right: 10px;
padding-left: 10px;
}
.collapse {
display: flex;
justify-content: center;
text-align: center;
}
.nav-link {
color:white !important;
font-weight: bold ;
font-size: 120%;
font-style: italic
}
.poetry-monkey-logo-center {
height:15px;
}
.poetry-monkey-logo-center>img {
height: 120px;
width: 130px;
border: 10px solid black;
border-radius: 80%;
margin-top: 40px;
}
/*
.navbar-brand {
border:5px solid black;
border-radius: 80%;
margin-top:80px;
background-color: white;
height: 59%;
}
nav {
width:100%;
height: 15%;
list-style:none;
font-weight: bold;
font-size: 130%;
display:inline;
text-align:center;
background-color: black;
border-bottom: 15px solid black;
}
.nav-link {
color: white !important;
text-shadow: 1px 1px 2px #ffaf1a;
}
#navbar-nav {
position:fixed;
}
div ul {
line-height: 390px
}
div ul li {
width: 1%;
margin-left: 190px;
}
li {
margin-right: -80px;
}
.nav-item-logo {
width:30%;
margin-right: -190px;
}
.nav-link {
margin-top:350%;
}*/
.navbar-toggler {
background-color: white;
}
body {
background-color: white;
}
.container {
color:black;
margin-top: 200px !important;
min-height: 250px !important;
}
.jumbotron{
background-color: #e6e6e6;
background-size: 100% 100%;
margin-top: 86px;
padding-top: 1%;
padding-bottom: 1%;
}
.poem-1, .poem-2, .poem-3 {
margin: auto;
width: 50%;
border: 6px groove black;
padding: 10px;
background-color: orange;
color:white;
font-weight: bold;
}
#p-poem {
display:none;
}<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> PoetryMonkey.com</title>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4yfaTqgFtohetphbbj0="
crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="assignment-5.css" type="text/css" media="all">
</head>
<body>
<!-- Navbar start -->
<nav class="navbar fixed-top navbar-expand-sm navbar-light p-3 mb-2" >
<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="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item-logo">
<a class="poetry-monkey-logo-center" href="#"><img src="final-poetry-monkey-logo.png" class="img-responsive" alt="Logo, a thinking monkey with glasses on"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
<!--start of jumbotron-->
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4"> Next Level Workouts</h1>
<p class="lead">Powerful pumps, Mental Motivation, and Explosive Endurance</p>
</div>
</div>
<!--end of jumbotron-->
<br><br><br>
<div class="poem-1">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p> <p class="p-poem">Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<button class="button" type="button" class="btn btn-primary btn-sm">Small button</button>
</div>
<br><br><br>
<div class="poem-2">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p> <p class="p-poem">Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<button class="button" type="button" class="btn btn-primary btn-sm">Small button</button>
</div>
<br><br><br>
<div class="poem-3">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p> <p class="p-poem">Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<button class="button" type="button" class="btn btn-primary btn-sm">Small button</button>
</div>
<br><br><Br><br><br><br><Br><br><br><br><Br><br><br><br><Br><br><br><br><Br><br><br><br><Br><br><br><br><Br><br><br><br><Br><br><br><br><Br><br><br><br><Br><br><br><br><Br><br><br><br><Br><br>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
