Меню Bootstrap 3 не рушится на Ipad

Прочтите: http://bassjobsen.weblogs.fm/twitter-bootstrap-3-breakpoints-and-grid/

Свертывание вашего меню определяется меньшим количеством файлов. (Загрузите последнюю версию с: https://github.com/twbs/bootstrap )

В variable.less вы найдете @grid-float-breakpoint: @screen-tablet;, где @screen-tablet равен 768px.

Таким образом, по умолчанию ваше меню сворачивается, когда ширина экрана ниже 768 пикселей;

В альбомной ориентации iPad ширина экрана составляет 1024 пикселя, поэтому меню НЕ сворачивается. Ширина портретного экрана iPad составляет 768 пикселей, поэтому меню НЕ свернется.

См. также navbar.less:

// Responsive navbar
// --------------------------------------------------

@media screen and (min-width: @grid-float-breakpoint) {

Чтобы изменить это поведение, вы должны изменить @grid-float-breakpoint на 767 и перекомпилировать файлы css.

NB Вы также упомянули: «Обратите внимание, что портрет действует как мобильный в отношении контента, но не меню».

Вы используете «col-lg-» в качестве префикса для строк вашей сетки. Элементы «col-lg-» будут располагаться ниже 992 пикселей (вертикальная ориентация для iPad) и станут горизонтальными выше 992 пикселей (альбомная ориентация).

Просто столкнулся с этой проблемой. Я предлагаю вам посетить:

Настройка Bootstrap

Найдите поле @grid-float-breakpoint и установите для него ширину экрана, после которой меню должно свернуть. Там вы можете использовать переменные из предыдущего раздела, а именно из Media queries breakpoints, чтобы установить правильные точки.

Кроме того, найдите время и проверьте все доступные переменные для изменения. Создание хорошо настроенного пакета Bootstrap может сэкономить вам часы разработки. работы, если не больше.

Для тех бедолаг, которые не используют меньше, вам придется изменить bootstrap.css и изменить медиа-запросы, связанные с панелью навигации, которые имеют точку останова от 768 пикселей до 992 пикселей.

Например, изменить

@media (min-width: 768px) {
  .nav-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-tabs.nav-justified > li > a {
    margin-bottom: 0;
  }
}

to:

@media (min-width: 992px) {
  .nav-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-tabs.nav-justified > li > a {
    margin-bottom: 0;
  }
}

Не меньше реализаций, которые я нашел, не работали

Нигде не удалось найти стили, чтобы это произошло само по себе, в итоге нашел это - https://coderwall.com/p/wpjw4w

Я смог исправить нашу проблему, изменив запрос @media (max-width: 768px) на 767px. Одна из приведенных выше ссылок ссылалась на проблему с 1px на iPad, которая ломалась по-другому и вместо этого заставляла мобильную версию веб-сайта.

Если кто-то использует стандартный файл bootstrap.css, мне пришлось изменить его в 3-х местах:

вокруг линии 3780

/*changed from 768 to 992 */
    @media (min-width: 992px) {
     .navbar-header {
      float: left;
     }
   }

вокруг строки 3799

 /* changed from 768 to 992 */
    @media (min-width: 992px) {

вокруг линии 3924

/*changed from 768 to 992 */
@media (min-width: 992px) {

Я надеюсь, что это поможет кому-то :)

У меня была противоположная проблема. На iPad панель навигации не была свернута (как и ожидалось), но были применены стили для свернутой панели навигации. Я решил эту проблему, изменив медиа-запрос для свернутой панели навигации, добавив -1 для соответствия $grid-float-breakpoint следующим образом:

@media (max-width: $screen-sm-min - 1) {
//styles for collapsed navbar (which won't show up on iPad portrait)
}