2016-02-09 4 views
0
<nav class="navbar navbar-default" role="navigation" id="my-navbar"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered"> 
        <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="navbar-brand-centered navbar-brand "> 
       <a href="#" class="navbar-brand"> 
       <img alt="Brand" src="assets/img/logo.png"> 
       </a></div> 

      </div> 
      <div class="collapse navbar-collapse" id=" navbar-collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="" class="glyphicon glyphicon-user btn btn-default navbar-btn navbar-right"> MyReservations </a> 
      </li> 
      <li> <a href="" class="glyphicon glyphicon-phone-alt btn btn-info navbar-btn navbar-right"> +919986040064 </a> </li> 
      <li><a href="" class="glyphicon glyphicon-envelope btn btn-warning navbar-btn navbar-right"> [email protected] </a> 
      </li>    
      </ul> 


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

Я использую эту навигационную панель. При изменении размера окна появляется кнопка переключения, но при нажатии на нее ничего не происходит. Есть ли какая-либо ошибка в кодировании. Я включил bootstrap.min.css и bootstrap.min.js и jquery.js файлов, но до сих пор проблема не решенаnavbar не работает при изменении размера окна

+1

Есть ошибки в консоли? – janhocevar

+0

Ошибка в вашей консоли? вы загружаете jquery сначала из bootstrap js? – keypaul

ответ

2

Вам необходимо изменить данные-цель #navbar-collapse от взглядов его:

<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> 

Вы целились другой элемент (#navbar-brand-centered), который является, где ваш логотип находится, а не ваше меню ...

1

data-target из <button> должен быть одинаковым с id из <div class="collapse navbar-collapse" и другого способом решить эту проблему, чтобы изменить id :

<div class="collapse navbar-collapse" id="navbar-brand-centered"> 

он будет работать!

jsfiddle-link

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