html - 导航栏没有正确折叠和展开
问题描述
现在正在尝试制定导航栏,但我的代码似乎不适用于它们。
折叠图标位于导航栏品牌旁边,然后导航栏链接位于它旁边。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
<title>Website</title>
</head>
<body>
<nav id="mainNavbar "class="navbar navbar-dark bg-dark navbar-expand-md">
<a class="navbar-brand" href="#">TEST</a>
<button class="navbar-toggle" data-toggle="collapse" data-target="#nav-links">
<span class="navbar-toggler-icon" id="navbar-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nav-links">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">HOME</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">ABOUT</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">TICKETS</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
解决方案
您必须将 navbar-toggler 类而不是 navbar-toggle 添加到按钮,请参阅代码:
<nav id="mainNavbar "class="navbar navbar-dark bg-dark navbar-expand-md">
<a class="navbar-brand" href="#">TEST</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#nav-links">
<span class="navbar-toggler-icon" id="navbar-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nav-links">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">HOME</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">ABOUT</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">TICKETS</a>
</li>
</ul>
</div>
</nav>
推荐阅读
- r - 在自定义环境中获取 R 中的脚本 => 加载包不起作用
- haskell - 可以在 Haskell 中以纯代码读取文件吗?
- python - Kivy 标签文本不更新
- django - 无法从 Django 中的选择表单中获取值
- reactjs - 为什么表单数据不在 req.body 中?
- php - 为什么在没有任何条款的情况下尝试访问 taxonomy.php 页面时出现 404 错误,(Wordpress 看不到分类页面)
- regex - 使用正则表达式匹配子字符串
- youtube-data-api - 超出配额 - 从我的应用上传 YouTube 链接 - 在仪表板上看不到超出配额
- windows - 从长路径启动 win32 应用程序
- javascript - 在 mongoose 文档中检索对象的所有键