Как исправить выпадающую кнопку внутри Navbar - начальной загрузки? - PullRequest
Новая
       52

Как исправить выпадающую кнопку внутри Navbar - начальной загрузки?

0 голосов
/ 15 января 2019

Проблема с активацией выпадающего меню в моей навигационной панели.

Я устанавливаю навигационную панель на свой веб-сайт, один из которых будет содержать выпадающий список. Все выглядит нормально, но когда я нажимаю на выпадающий список, ничего не появляется.

добавил большую часть кода для главной страницы для лучшего понимания. 

<!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 Ответ

0 голосов
/ 15 января 2019

Вы импортируете две версии Bootstrap, а также не импортируете jQuery, от которого зависит Bootstrap. При тестировании вашего кода, версия 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>
...