激活导航栏中的下拉菜单。
我正在网站上安装导航栏，其中一个选项将包含一个下拉列表。一切看起来都很好，但是当我单击下拉列表时，什么都没有出现。
为首页添加了大多数代码，以提供更好的见识。
<!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>
答案 0 :(得分：1)
您要导入两个版本的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>