我是初学者,正在尝试使用 Bootstrap。引导导航栏在响应式屏幕中无法正常工作。 帮我改正我的错误
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.
min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-light">
<div class="container-fluid">
<h2>Posts</h2>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarItems">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse" id="navbarItems">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Feed</a></li>
<li class="nav-item"><a class="nav-link" href="#">Week</a></li>
<li class="nav-item"><a class="nav-link" href="#">Month</a></li>
<li class="nav-item"><a class="nav-link" href="#">Year</a></li>
<li class="nav-item"><a class="nav-link" href="#">Infinity</a></li>
<li class="nav-item"><a class="nav-link" href="#">Latest</a></li>
</ul>
</div>
</div>
</nav>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"
></script>
</body>
</html>
已经提供了整个代码,正在尝试当我点击汉堡包图标时,它会折叠并再次点击会重新打开它。
我看到您的 HTML 中缺少一些属性和类,请尝试将其添加到您的 html 中它应该可以工作。
此外,您在按钮中使用了错误的属性。
// This
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarItems">
<span class="navbar-toggler-icon"></span>
</button>
// To This
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarItems"
aria-controls="navbarTogglerDemo03"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
// This
<div class="navbar-collapse" id="navbarItems"></div>
// To This
<div class="collapse navbar-collapse" id="navbarItems"></div>
希望这对你有用:)