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

Я делаю проект, используя новый обновленный Bootstrap 3 RC1.

Существуют новые функции с новым Bootstrap 3, которые сильно отличаются от предыдущих версий. Я понял большинство изменений, но я не могу решить:

когда в меню есть много элементов, которые он разбивает на Ipad и других планшетах, потому что он не обрушивается, как будто он автоматически рушится на мобильном устройстве (что хорошо)

Я хотел бы знать, как я могу заставить "ipads" действовать как мобильные и показывать свернутое меню или еще лучше - как свернуть меню, если у него много элементов и на некоторых экранах, и меньше он ломается

вот скриншоты моего живого проекта:

- Меню на больших экранах -

enter image description here

- Меню на ландшафте Ipad -

enter image description here

- Меню на портретной панели Ipad -

enter image description here

- Меню на мобильном устройстве -

enter image description here

Я просто хочу, чтобы ipad работал как мобильный. обратите внимание, что портрет действует как мобильный, но не в меню, но не в меню.

любые предложения? Благодаря

Ответы

Ответ 1

Пожалуйста, прочитайте: http://bassjobsen.weblogs.fm/twitter-bootstrap-3-breakpoints-and-grid/

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

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

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

Пейзаж ipad имеет ширину экрана 1024px, поэтому меню не будет разваливаться. Ширина экрана для портрета IPad составляет 768 пикселей, поэтому меню НЕ сбрасывается.

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

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

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

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

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

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

Ответ 2

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

Настройка Bootstrap

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

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

Ответ 3

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

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

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

в

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

Ответ 4

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

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

Ответ 5

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

Ответ 6

Если кто-то использует стандартный файл 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) {

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

Ответ 7

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

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