Кнопка загрузки Bootstrap Navbar не работает

Когда я сжимаю окно и нажимаю кнопку, он не работает. Кнопка не отвечает. Что, кажется, проблема здесь, может кто-нибудь сказать мне, пожалуйста?

<button type="button" 
        class="navbar-toggle" 
        data-toggle="collapse" 
        data-target=".navbar-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 class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
        <li>
            <a href="">Page 1</a>
        </li>
        <li>
            <a href="">Page 2</a>
        </li>
        <li>
            <a href="">Page 3</a>
        </li>
    </ul>

Библиотеки - это jQuery 2.1.3 и bootstrap 3.3.1.

Ответ 1

Ваш код выглядит великолепно, единственное, что я вижу, это то, что вы не включили свернутый класс в свой селектор кнопок. http://www.bootply.com/cpHugxg2f8 Примечание. Требуется плагин JavaScript. Если JavaScript отключен и область просмотра достаточно узкая, что навигация сворачивается, невозможно будет расширить навигационную панель и просмотреть содержимое в.navbar-collapse.

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

<div class="navbar-wrapper">
      <div class="container">

        <nav class="navbar navbar-inverse navbar-static-top">
          <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="#">Project name</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                    <li><a href="">Page 1</a>
                    </li>
                    <li><a href="">Page 2</a>
                    </li>
                    <li><a href="">Page 3</a>
                    </li>

              </ul>
            </div>
          </div>
        </nav>

      </div>
    </div>

Ответ 2

Демо: http://jsfiddle.net/u1s62Lj8/1/

Вам нужны файлы jquery и boostrap javascript, включенные в вашу html-страницу, чтобы переключение работало.

<html>
   <head>
       // stylesheets here
       <link rel="stylesheet" href=""/> 
   </head>
   <body>
      //your html code here

      // js scripts here
      // note jquery tag has to go before boostrap
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
   </body>
</html>

Ответ 3

Запомните загрузку jquery перед загрузкой js

Ответ 4

Если вы измените идентификатор, то Toggle не будет работать, так что проблема была со мной, я просто изменяю

<div class="collapse navbar-collapse" id="defaultNavbar1">
    <ul class="nav navbar-nav">

id = "defaultNavbar1", тогда переключатель работает