выпадающее меню в bootstrap navbar

Question

Я пытаюсь this navbar out с выпадающим списком. Когда я пытаюсь создать его в своем веб-сервисе, я не получаю раскрывающееся меню. Я могу нажать на него, но ничего не происходит. Это моя текущая настройка:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <nav class="navbar navbar-default" style="width: 60%; margin: 0 auto;"> 
 
     <div class="container-fluid"> 
 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="#">Foo</a></li> 
 
       <li class="dropdown"> 
 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Bar<span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
        <li role="separator" class="divider"></li> 
 
        <li><a href="#">Foo</a></li> 
 
        <li role="separator" class="divider"></li> 
 
        <li><a href="#">Bar</a></li> 
 
        <li role="separator" class="divider"></li> 
 
        <li><a href="#">Baz</a></li> 
 
       </ul> 
 
       </li> 
 
       <li><a href="#">Baz</a></li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     </nav>

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

Answer 1

Добавить J запрос & Bootstrap Файл

Удалить этот класс collapse

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> 
 
    <nav class="navbar navbar-default" style="width: 60%; margin: 0 auto;"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="#">Foo</a></li> 
 
       <li class="dropdown"> 
 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Bar<span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
        <li role="separator" class="divider"></li> 
 
        <li><a href="#">Foo</a></li> 
 
        <li role="separator" class="divider"></li> 
 
        <li><a href="#">Bar</a></li> 
 
        <li role="separator" class="divider"></li> 
 
        <li><a href="#">Baz</a></li> 
 
       </ul> 
 
       </li> 
 
       <li><a href="#">Baz</a></li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     </nav>

Answer 2

Navbar По умолчанию Navbar Требуется JavaScript Plugin

Если JavaScript отключен, и окно просмотра достаточно узок, что Navbar рухнет, это будет невозможно расширить Navbar и просматривать содержимое в .navbar коллапсом.

В ответном навигаторе требуется, чтобы плагин Collapse включался в вашу версию Bootstrap.

Вот плагин: http://getbootstrap.com/javascript/#collapse

От: http://getbootstrap.com/components/#navbar

Answer 3

Поскольку вам не хватает отзывчивый выпадающий список

HTML

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 

DEMO HERE

Answer 4

Он работает с:

• JQuery 2.0.2: https://code.jquery.com/jquery-2.0.2.min.js
• Bootstrap - CSS: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
• Bootstrap - JS: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js

Основной шаблон, который можно найти здесь: http://getbootstrap.com/getting-started/#template