我正在尝试创建引导导航栏,但切换按钮不起作用。我在 body 标签上使用了 .sidebar-collapse 类,因此当我单击切换按钮时,数据应该显示在右侧。但这并没有发生。有人可以告诉我我的代码有什么问题吗?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js">
</script>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/now-ui-kit.css" type="text/css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet" integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
<title>
Techversity
</title>
</head>
<body class="sidebar-collapse">
<nav class="navbar navbar-expand-lg bg-primary">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand" href="#pablo">
Techversity
</a>
<button class="navbar-toggler navbar-toggler-right" type="button"
data-toggle="collapse" data-target="#navigation" aria-controls="navigation-
index" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</button>
</div>
<div class="collapse navbar-collapse justify-content-end"
id="navigation">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#pablo">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pablo">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pablo">Disabled</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pablo"><i class="fa fa-instagram"
aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pablo"><i class="fa fa-youtube-
play" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
标记不正确。
div.container
元素内不应有 div.navbar-translate
或 nav.navbar
元素。我在没有它们的情况下尝试过它并且它有效。另外,您可以在here检查标记是否不是 Bootstrap 预期的标记。
jquery.min.js
jquery.min.js