Bootstrap 導航欄在嘗試使其可折疊時出現故障
[英]Bootstrap navbar glitching while trying to make it collapsible
問題描述
我從 w3schools.com 獲得了導航欄的示例代碼。 它正在使用bootstrap 。 這是代碼：
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
這個導航欄工作得很好。 但是對於小屏幕（可折疊導航欄的情況），我希望導航欄在單擊其中的選項時折疊。 因此，我在所有<li>中添加了data-toggle="collapse" data-target="#myNavbar" 。 現在導航欄可以正確切換到小屏幕。
這是該問題的視頻：
這是修改后的代碼：
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a data-toggle="collapse" data-target="#myNavbar" href="#">Page 1</a></li>
<li><a data-toggle="collapse" data-target="#myNavbar" href="#">Page 2</a></li>
<li><a data-toggle="collapse" data-target="#myNavbar" href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
但是現在，整個導航欄在大屏幕（桌面）上出現故障。 請幫助解決這個問題。
請指出這是否是復制，因為我找不到。
桌面屏幕出現故障的最終 HTML 代碼如下（google-chrome 中的相同問題，firefox，勇敢）：
<html> <title>Example</title> <body> <,DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min,js"></script> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a data-toggle="collapse" data-target="#myNavbar" href="#">Home</a></li> <li><a data-toggle="collapse" data-target="#myNavbar" href="#">Page 2</a></li> <li><a data-toggle="collapse" data-target="#myNavbar" href="#">Page 3</a></li> </ul> </div> </div> </nav> <div class="container"> <h3>Collapsible Navbar</h3> <p>In this example. the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window), <p>Only when the button is clicked. the navigation bar will be displayed.</p> </div> </body> </html> </body> </html>
單擊展開片段以查看桌面屏幕上的故障。
1 個解決方案
解決方案1
1 已采納 2020-12-25 07:03:27
有一個更好的方法來折疊導航欄！ 為什么不包括一些JS行，因為您已經在使用 jQuery，就像這樣 -
$('.navbar-nav>li>a').on('click', function() { $('.navbar-collapse').collapse('hide'); });
<title>Example</title> <body> <,DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min,js"></script> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </div> </nav> <div class="container"> <h3>Collapsible Navbar</h3> <p>In this example. the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window), <p>Only when the button is clicked. the navigation bar will be displayed.</p> </div> </body> </html> </body>
如何使Bootstrap 3導航欄不折疊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.