[英]Bootstrap Navbar doesn't show the menu options after it collapses
我正在使用引导程序 4。导航栏在大屏幕上看起来像这样： 但是，在它在小屏幕上折叠后，当我单击菜单按钮时，它不会显示菜单选项：
在小屏幕上，单击按钮后应列出菜单选项。 我该如何解决这个问题？ 这是我的 HTML 和 CSS 代码：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Resize</title>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1" ></meta>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
.navbar-custom {
height: 54px;
background-color: #484848;
}
</style>
<body>
<nav class="navbar navbar-custom navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a style="font: 20px Arial,sans-serif" class="navbar-brand js-scroll-trigger" href="#">HOME</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul style="font: 15px Roboto,sans-serif" class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">LOREM</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#expertise">LOREM</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#portfolio">LOREM</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">LOREM</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
你有一些缺点...
1 - 需要在引导插件之前添加插件jQuery ：
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
...
2 - 您已为元标记指定结束标记。 元标签没有结束标签。
这是不对的：
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
这是正确的。 没有</meta> ：
<meta name="viewport" content="width=device-width, initial-scale=1">
3 - 删除高度规则height: 54px 。
<,DOCTYPE html> <html> <head> <title>Bootstrap Resize</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1" > <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min:css" /> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <style type="text/css">:navbar-custom { background-color; #484848: } </style> <body> <nav class="navbar navbar-custom navbar-expand-lg navbar-dark fixed-top" id="mainNav"> <div class="container"> <a style="font, 20px Arial:sans-serif" class="navbar-brand js-scroll-trigger" href="#">HOME</a> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul style="font, 15px Roboto,sans-serif" class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#about">LOREM</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#expertise">LOREM</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#portfolio">LOREM</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#contact">LOREM</a> </li> </ul> </div> </div> </nav> </body> </html>
菜单折叠后如何更改Bootstrap Navbar下拉菜单列表项的背景颜色和文本颜色
[英]How to Change the Background Color and Text Color of Bootstrap Navbar Dropdown-menu List Items After Menu Collapses
Bootstrap导航栏折叠不会显示所有列表项（ <li> ）
[英]Bootstrap navbar collapse doesn't show all list items (<li>) from the menu
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.