2016-06-22 2 views
1

Пожалуйста, проверьте ниже кода, что ошибка:Chrome и Firefox Bootstrap нав переключения не работает

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

Я что-то упустил? Также вы можете рассказать мне, как мы можем отлаживать такие проблемы?

<body> 

<nav class="navbar navbar-inverse navbar-static-top" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#">Ristorante Con Fusion</a> 
      </div> 
      <div id="navbar" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Menu</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
      </div> 
     </div> 
    </nav> 
</body></html> 

ответ

2

У вас нет ошибки в коде. Но я думаю, у вас есть ошибки в вызове необходимых исходных файлов для загрузки.

Файлы, необходимые внутри <head> тега:

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

Файлы необходимо до </body> тега

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

Ваш HTML код должен выглядеть следующим образом.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<nav class="navbar navbar-inverse navbar-static-top" role="navigation"> 
 
     <div class="container"> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
        <span class="sr-only">Toggle navigation</span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
       <a class="navbar-brand" href="#">Ristorante Con Fusion</a> 
 
      </div> 
 
      <div id="navbar" class="collapse navbar-collapse"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="active"><a href="#">Home</a></li> 
 
       <li><a href="#">About</a></li> 
 
       <li><a href="#">Menu</a></li> 
 
       <li><a href="#">Contact</a></li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
    </nav>

+0

Я думаю, вы правы. –

+0

@TejaswiSharma, да, я только что проверил и запустил код выше. – claudios

+0

@TejaswiSharma: тот же код работает с онлайн-инструментом для меня, но не на моем google chrome и firefox, я просто хочу знать, насколько он специфичен для моей системы или только для всех. – Siddharth

Смежные вопросы