嗨，我使用bootstrap在我的网站，使一个可折叠的导航栏。当我调整屏幕大小时，导航栏会崩溃。但是，当我点击可折叠按钮时，导航栏不出现在下面。
我代码:
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="images/logo.jpg" alt="Logo" height="45" width="45">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#dogs">Dogs</a>
</li>
<li class="nav-item"><a class="nav-link" href="#cats">Cats</a>
</li>
</ul>
</div>
</nav>
我还包括了bootstrap cdn链接:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
非常感谢您的帮助。
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="https://source.unsplash.com/random" alt="Logo" height="45" width="45">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-expanded="false" aria-controls="collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#dogs">Dogs</a>
</li>
<li class="nav-item"><a class="nav-link" href="#cats">Cats</a>
</li>
</ul>
</div>
</nav>data-toggle应该是你想要切换的元素的Id。
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
-
change
navbar-expand-smtonavbar-expand-lg -
data-target="#navbarTogglerDemo02"属性必须与id="collapsibleNavbar"匹配，所以将id更改为id="navbarTogglerDemo02"
下面是完整代码:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> //change lg
<a class="navbar-brand" href="#">
<img src="images/logo.jpg" alt="Logo" height="45" width="45">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarTogglerDemo02"> //match target attribut
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#dogs">Dogs</a>
</li>
<li class="nav-item"><a class="nav-link" href="#cats">Cats</a>
</li>
</ul>
</div>
</nav>