Почему моя панель управления сбрасыванием Bootstrap не работает?

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 
    </head> 

    <body data-spy="scroll" data-target="#my-navbar"> 

    <!--Start of the navbar section--> 
    <nav id="my-navbar" class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 

     <div class="navbar-header">  
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
      <span class="glyphicon glyphicon-align-justify"></span> 
      </button> 

      <div class="navbar-brand">Lorem Ipsum</div> 
     </div> 

     <div id="navbar-collapse" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
      <li><a href="#">Lorem Ipsum</a></li> 
      <li><a href="#">Lorem Ipsum</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Lorem Ipsum</a></li> 
      </ul> 
     </div> 
     </div> 
    </nav> 
    <!--End of the navbar section--> 
    </body> 
</html>

Код работает нормально, и я прочитал руководство по загрузке и не вижу ошибок в именах моих классов, но когда я сворачиваю окно браузера в режим просмотра телефона, кнопка не работает, и он не сбрасывает навигационную панель, как ожидалось.Почему моя панель управления сбрасыванием Bootstrap не работает?

источник

2015-12-21 Khesualdo Condori

https://jsfiddle.net/tvance929/ gefpLodx ... Это сцена, с которой вы можете начать. –

Возможный дубликат [Twitter bootstrap не работает] (http://stackoverflow.com/questions/34363492/twitter-bootstrap-is-not-working) – vanburen

Хорошая работа Alex! – Kelsey

Вы забыли добавить, viewport meta. Пожалуйста, добавьте это внутри <head> тег:

<meta name="viewport" content="width=device-width, initial-scale=1" />

И да, вы забыли добавить bootstrap-responsive.css:

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

Работа выхода: http://output.jsbin.com/gelobacoxi

источник

2015-12-21 19:05:03

Nope не исправить проблему –

@AlexMurray Можете ли вы сделать http://jsbin.com для этого? –

@AlexMurray Проверьте выше ответ. –

Были отсутствующий тег тела, я заменил что с div и отлично работает. Вот ваш код работает, как ожидалось: http://www.codeply.com/go/dWnwMpejAH

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 
    </head> 
<body> <!-- changed here --> 
    <div data-spy="scroll" data-target="#my-navbar"> 

    <!--Start of the navbar section--> 
    <nav id="my-navbar" class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 

     <div class="navbar-header">  
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
      <span class="glyphicon glyphicon-align-justify"></span> 
      </button> 

      <div class="navbar-brand">Lorem Ipsum</div> 
     </div> 

     <div id="navbar-collapse" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
      <li><a href="#">Lorem Ipsum</a></li> 
      <li><a href="#">Lorem Ipsum</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Lorem Ipsum</a></li> 
      </ul> 
     </div> 
     </div> 
    </nav> 
    <!--End of the navbar section--> 
    </div> 
</body>

источник

2015-12-21 19:12:22 marcanuy

ваш первый тег тела? ... –

@toddv обновлено, тег тела был вне кодекса кода;) – marcanuy

вам нужно следующее в вашем <head> теге, согласно boostrap get started документация:

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<!-- Latest compiled and minified JavaScript --> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

источник

2015-12-21 19:16:47

Спасибо, вставив эти сценарии, исправил проблему –

Что произойдет, если мы не сможем использовать cdn? можем ли мы сделать традиционную регистрацию сценариев начальной загрузки jquery и все еще иметь такое же влияние? –

@SpyrosSavvides: поздний ответ. Я не уверен, что вы подразумеваете под «традиционной регистрацией», но альтернативой является загрузка файлов - jquery + bootstrap локально (вы загружаете в свои папки). –

Почему моя панель управления сбрасыванием Bootstrap не работает?

ответ

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