如何修復導航欄內的下拉按鈕-引導程序？
[英]How to fix dropdown button inside a Navbar - bootstrap?
問題描述
在我的導航欄中激活下拉菜單時出現問題。
我正在網站上安裝導航欄，其中一個選項將包含一個下拉列表。 一切看起來都很好，但是當我單擊下拉列表時，什么都沒有出現。
為首頁添加了大多數代碼，以獲取更深入的了解。
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8">
<title>CDC Tuberculosis Infection Control Toolkit</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="Content/bootstrap.min.css" rel="stylesheet">
<script src="Scripts/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="jumbotron text-center">
<h1>CDC Tuberculosis Infection Control Toolkit</h1>
</div>
<hr>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Foreword</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Toolkit Curriculum
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Engineering Controls</a></li>
<li><a href="#">Administrative Controls</a></li>
<li><a href="#">Respiratory Controls</a></li>
</ul>
</li>
<li><a href="#">Abbreviations</a></li>
<li><a href="#">Glossary</a></li>
</ul>
</div>
</nav>
</div>
<br>
<div class="content col-md-12">
<div class="col-md-2">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="col-md-10">
<div class="material">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Atqui iste locus est, Piso, tibi etiam atque etiam confirmandus, inquam; Duo Reges: constructio interrete. Vitae autem degendae ratio maxime quidem illis placuit quieta. Quae hic rei publicae vulnera inponebat, eadem ille sanabat. Quis non odit sordidos, vanos, leves, futtiles? Ne discipulum abducam, times. De hominibus dici non necesse est. Quod autem ratione actum est, id officium appellamus. Quid, si etiam iucunda memoria est praeteritorum malorum?
Quis Pullum Numitorium Fregellanum, proditorem, quamquam rei publicae nostrae profuit, non odit? Quid Zeno? Est enim tanti philosophi tamque nobilis audacter sua decreta defendere. Illa tamen simplicia, vestra versuta. Sin autem est in ea, quod quidam volunt, nihil impedit hanc nostram comprehensionem summi boni. Istam voluptatem, inquit, Epicurus ignorat?
Progredientibus autem aetatibus sensim tardeve potius quasi nosmet ipsos cognoscimus. Haec et tu ita posuisti, et verba vestra sunt. Iam in altera philosophiae parte. Non est enim vitium in oratione solum, sed etiam in moribus. Si verbum sequimur, primum longius verbum praepositum quam bonum. Eaedem res maneant alio modo. Primum quid tu dicis breve? Quamquam haec quidem praeposita recte et reiecta dicere licebit. Sed ne, dum huic obsequor, vobis </p>
</body>
</html>
1 個解決方案
解決方案1
1 已采納 2019-01-14 22:51:01
您要導入兩個版本的Bootstrap，也不要導入Bootstrap所依賴的jQuery。 測試您的代碼，您應該使用的Bootstrap版本是v3.3.7，而不是您標記的Bootstrap 4，它也必須與bootstrap.js匹配。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <!DOCTYPE html> <html lang=en> <head> <meta charset="utf-8"> <title>CDC Tuberculosis Infection Control Toolkit</title> </head> <body> <div class="container-fluid"> <div class="jumbotron text-center"> <h1>CDC Tuberculosis Infection Control Toolkit</h1> </div> <hr> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Foreword</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Toolkit Curriculum <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Engineering Controls</a></li> <li><a href="#">Administrative Controls</a></li> <li><a href="#">Respiratory Controls</a></li> </ul> </li> <li><a href="#">Abbreviations</a></li> <li><a href="#">Glossary</a></li> </ul> </div> </nav> </div> <br> <div class="content col-md-12"> <div class="col-md-2"> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> <div class="col-md-10"> <div class="material"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Atqui iste locus est, Piso, tibi etiam atque etiam confirmandus, inquam; Duo Reges: constructio interrete. Vitae autem degendae ratio maxime quidem illis placuit quieta. Quae hic rei publicae vulnera inponebat, eadem ille sanabat. Quis non odit sordidos, vanos, leves, futtiles? Ne discipulum abducam, times. De hominibus dici non necesse est. Quod autem ratione actum est, id officium appellamus. Quid, si etiam iucunda memoria est praeteritorum malorum? Quis Pullum Numitorium Fregellanum, proditorem, quamquam rei publicae nostrae profuit, non odit? Quid Zeno? Est enim tanti philosophi tamque nobilis audacter sua decreta defendere. Illa tamen simplicia, vestra versuta. Sin autem est in ea, quod quidam volunt, nihil impedit hanc nostram comprehensionem summi boni. Istam voluptatem, inquit, Epicurus ignorat? Progredientibus autem aetatibus sensim tardeve potius quasi nosmet ipsos cognoscimus. Haec et tu ita posuisti, et verba vestra sunt. Iam in altera philosophiae parte. Non est enim vitium in oratione solum, sed etiam in moribus. Si verbum sequimur, primum longius verbum praepositum quam bonum. Eaedem res maneant alio modo. Primum quid tu dicis breve? Quamquam haec quidem praeposita recte et reiecta dicere licebit. Sed ne, dum huic obsequor, vobis </p> </div> </div> </div> </body> </html>
Bootstrap 3：固定頂部欄導航欄反面上的下拉菜單NOT DROPPING DOWN
[英]Bootstrap 3: Dropdown menu on a fix top bar navbar inverse NOT DROPPING DOWN
默認情況下，如果Bootstrap 3下拉菜單位於折疊的導航欄中，則如何使其處於打開狀態
[英]How to make a Bootstrap 3 dropdown menu open by default when it is inside a collapsed navbar
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.