Bootstrap ошибка в примерах

Рейтинг: 0Ответов: 1Опубликовано: 26.01.2015

На странице Bootstrap все колонки с настройкой col-md на айпаде работают неправильно.
Это значит, что для айпада нужно обязательно указывать col-xs col-sm, или это ошибка требующая исправления?

Ответы

▲ 3

@Fort Testo, если вы не понимаете, как работает framework, то это не значит, что технология плохая, а значит, что надо в ней разбираться. И никогда в программировании не делайте поспешных выводов, не разобравшись.

Там всё просто и понятно написано, есть 4 стиля, которые работают при разных размерах браузера, если размер окна браузера не входит в рамки этого стиля, то применяется класс width: 100%.

Открываем обычный iPad, к примеру, в Google Chrome, смотрим в альбомном виде на этот пример, разрешение браузера в альбомном виде: 1024px в ширину. Значит стили col-md, которые работают при размере браузера больше 992px, должны отображаться по их ширине, заданной стилем, смотрим на экран, стили отображаются как надо в 12 колонок и т.д.

Переворачиваем iPad в портретный вид, ширина браузера сокращается до размера меньше 900px, и пример сразу приобретает другой вид, все колонки становятся шириной 100%, но всё работает так, как и задумано.

А теперь ещё раз пройдёмся по этой таблице для понимания, что в ней написано:

  1. .col-xs- - стиль работает при ширине браузера меньше 768px, при всех других разрешениях больше 768px размер будет 100%.
  2. .col-sm- - стиль работает при ширине браузера больше 768px, если разрешение меньше 768px, то будет 100%.
  3. .col-md- - стиль работает при ширине браузера больше 992px
  4. .col-lg- - стиль работает при ширине браузера больше 1200px

Также там есть примеры работы смешанных стилей, в приоритете всегда тот стиль, который подходит под условия и если написано .col-md-6 .col-sm-6, то на портретном виде iPad, будет работать стиль .col-sm-6.

По поводу разрешения 2048х1536, почитайте про работу дисплеев Retina в браузере, да, они дают больше точек на дюйм, но разрешение браузера совсем другое, по этой ссылке можно увидеть различие. У меня на ноутбуке с Retina выдаёт в открытом на весь экран браузере:

Размер окна браузера в пикселях (ширина х высота): 1280 x 676
Разрешение экрана в пикселях (ширина х высота): 2560 x 1600

В стилях Twitter Bootstrap определяется первое значение, а, именно, размер окна браузера.