[英]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.