Bootstrap рухнул navbar не разворачивается

Question

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

<nav class="navbar navbar-default" role="navigation"> 

      <div class="container-fluid"> 
       <div class="navbar-header logo"> 
        <a class="navbar-brand" href="index.html"><img src="images/nastilogowhite.png" class="img-responsive" style="margin: 0 auto;"></a> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        </button> 

       </div> 

       <div class="collapse navbar-collapse" id="nav-collapse"> 
         <!-- Individual Navbar elements --> 
        <ul class="nav nav-justified nasti-nav"> 
         <li class="active"><a href="index.html">Home</a></li> 
         <li class="divider"></li> 
         <li><a href="familylaw.html">Family Law</a></li> 
         <li class="divider"></li> 
         <li><a href="criminallaw.html">Criminal Law</a></li> 
         <li class="divider"></li> 
         <li><a href="conveyancing.html">Conveyancing</a></li> 
         <li class="divider"></li> 
         <li><a href="about.html">About</a></li> 
         <li class="divider"></li> 
         <li><a href="contact.html">Contact</a></li> 
        </ul> 
       </div> 
      </div> <!-- Container fluid--> 

     </nav> 

Я использовал этот идентичный код на всех страницах, однако по какой-то причине он работает только на домашней странице этого сайта. Единственная разница между домашней страницей и другими страницами заключается в том, что под тегами <nav> есть еще один div-контент, содержащий основной текст для этой страницы & изображение. Тем не менее, когда я удаляю весь код для этого div с моей страницы, проблема сохраняется, поэтому я не думаю, что это так ....

Я также могу быть (над) с использованием избыточных классов, но это история для более поздних ...

Answer 1

Я использовал тот же код и он прекрасно работает, проверьте на http://jsbin.com/henume/2/edit?html,output

Вы упомянули, что он изменяет правильно, поэтому я предполагаю, что bootstrap.css работает. Убедитесь, что jQuery.js и boostrap.js включены в страницу.

Answer 2

В большинстве случаев это связано с тем, что jQuery не привязан к странице правильно. Или bootstrap.js ссылается перед jQuery.js. Убедитесь, что у вас есть соответствующие ссылки.

Answer 3

Как упоминалось в Насирхане, код отлично работает на живом домене. Иногда эта проблема может быть вызвана только локальным доменным именем, как это было в моем случае, и тот же код визуализировался на реальном сайте.

Answer 4

У меня была такая же проблема, подтвердите, что вы включаете эти два файла. Первый для Bootstrap (css), а второй для Bootstrap (javascript). В моем случае включил css один правильно, но вы знаете, что я сделал во время включения второго, который я включил, это как stylesheet, но это сценарий.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 


<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

Answer 5

Добавление этих трех линий помогло мне.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">