如何修复导航栏内的下拉按钮 - 引导程序？答案

【问题标题】：How to fix dropdown button inside a Navbar - bootstrap?如何修复导航栏内的下拉按钮 - 引导程序？
【发布时间】：2019-01-14 22:27:56
【问题描述】：

在我的导航栏中激活下拉菜单时出现问题。

我正在我的网站上安装一个导航栏，其中一个选项将包含一个下拉菜单。一切看起来都很好，但是当我点击下拉菜单时，什么也没有出现。

为首页添加了大部分代码以获得更好的洞察力。

<!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>

【问题讨论】：

一个代码 sn-p 会很棒；这也可能是由于您在引导程序中加载的方式
刚刚添加了更多代码
您两次导入 Boostrap 的 css，而且很可能来自不同的版本。你也缺少 jQuery
我相信下拉菜单依赖于 jQuery 和 bootstrap.js

标签： javascript twitter-bootstrap twitter-bootstrap-3 navbar dropdown

【解决方案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>

【讨论】：