2016-06-29 7 views
3

Когда я пытаюсь использовать мобильную версию моей страницы на основе jumbotron, навигационная панель не переключается. Я хочу, чтобы он складывался, как в the example, но это не так. Может быть, мне не хватает кода, можете ли вы помочь мне заставить его работать? Этот снимок экрана - это то, как он должен выглядеть, когда navbar складывается в [пример.bootstrap navbar не переключается

enter image description here

Это my page, который основан на JumboTron но Navbar раскладывающийся не работает при нажатии на кнопку в правом верхнем углу, он не переключается.

enter image description here

Мой код (идентичен примеру).

<nav class="navbar navbar-inverse navbar-fixed-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="/">Customer Service</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <form class="navbar-form navbar-right" action="/account/do_login" method="post"> 
       <div class="form-group"> 
        <input type="text" name="email" placeholder="Email" class="form-control"> 
       </div> 
       <div class="form-group"> 
        <input type="password" name="password" placeholder="Password" class="form-control"> 
       </div> 
       <button type="submit" class="btn btn-success">Sign in</button> 
      </form> 
     </div> 
     <!--/.navbar-collapse --> 
    </div> 
</nav> 
+1

проверьте свою консоль браузера и посмотрите, есть ли какие-либо ошибки? –

+0

@DivyeshSavaliya К сожалению, сообщения об ошибке отсутствуют. –

+1

check after toggle click –

ответ

3

Пожалуйста, попробуйте проверить загрузочный файл bootstrap.min.js или bootstrap.js. возможно, не загружаются должным образом.

+0

Благодарим вас за ответ. Теперь это работает. –

+1

Вас приветствуют. –

0

Можете ли вы показать нам, где вы импортируете bootstap и jquery?

Я считаю, что отказ есть. Потому что для меня пример работает. У меня было такое же поведение, прежде чем привести свой импорт в порядок.

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

Это должно быть помещено в <head> в таком порядке, чтобы обеспечить надлежащее функционирование Bootstrap.

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