Bootstrap 3 Navbar не отвечает

Я тестировал свой загрузочный сайт на различных устройствах, чтобы убедиться, что он отзывчив. У меня все правильно изменяется для разных размеров дисплея, кроме панели навигации. В моем браузере, когда я изменяю размер окна по горизонтали, кажется, что он реагирует, сворачивая меню, как и ожидалось, но на мобильных устройствах я по-прежнему вижу панель навигации, как если бы она отображалась в полноэкранном окне на рабочем столе или ноутбуке. Вот код моей панели навигации:

<div class="container">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">
          <img alt="WinShir" src="img/rocket.png" /> WinShir
        </a>
        <button type='button' class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="sr-only">Toggle Navigation</span>
        </button>
      </div>

      <ul class="nav navbar-nav navbar-right collapse navbar-collapse">
        <li><a href="#signInModal" data-toggle="modal">Sign In</a></li>
        <li><a href="#signupModal" data-toggle="modal">Sign Up</a></li>
      </ul>
    </div>

  </nav>
</div>

Я попытался изменить элемент nav на div, чтобы посмотреть, помогло ли это, но безуспешно. Я также удалил закрывающий div класса контейнера, чтобы посмотреть, помогло ли это, но тоже не повезло.


person John Halbert    schedule 25.04.2015    source источник
comment
Отвечает ли остальная часть вашего сайта, только не панель навигации? Он увеличен на мобильных устройствах или выглядит как крошечная уменьшенная версия для настольных компьютеров?   -  person ThisClark    schedule 25.04.2015
comment
Да все остальное нормально реагирует, только не навбар. Я упомянул в посте, но, кажется, есть некоторая путаница. На моем ноутбуке он отвечает, когда я изменяю размер окна. С контейнером div, упомянутым ниже, или без него. На моем телефоне (это андроид, браузер хром) все откликается, кроме навбара. Опять же, с контейнером div или без него.   -  person John Halbert    schedule 26.04.2015


Ответы (1)


Вероятно, вы не настроили область просмотра. Поместите это в <head> и посмотрите, будет ли это иметь значение.

<meta name="viewport" content="width=device-width, initial-scale=1">
person ThisClark    schedule 25.04.2015
comment
В этом была проблема. Спасибо! - person John Halbert; 26.04.2015