Bootstrap ошибка в примерах
На странице Bootstrap все колонки с настройкой col-md
на айпаде работают неправильно.
Это значит, что для айпада нужно обязательно указывать col-xs col-sm
,
или это ошибка требующая исправления?
На странице Bootstrap все колонки с настройкой col-md
на айпаде работают неправильно.
Это значит, что для айпада нужно обязательно указывать col-xs col-sm
,
или это ошибка требующая исправления?
@Fort Testo, если вы не понимаете, как работает framework, то это не значит, что технология плохая, а значит, что надо в ней разбираться. И никогда в программировании не делайте поспешных выводов, не разобравшись.
Там всё просто и понятно написано, есть 4 стиля, которые работают при разных размерах браузера, если размер окна браузера не входит в рамки этого стиля, то применяется класс width: 100%
.
Открываем обычный iPad, к примеру, в Google Chrome, смотрим в альбомном виде на этот пример, разрешение браузера в альбомном виде: 1024px в ширину. Значит стили col-md, которые работают при размере браузера больше 992px, должны отображаться по их ширине, заданной стилем, смотрим на экран, стили отображаются как надо в 12 колонок и т.д.
Переворачиваем iPad в портретный вид, ширина браузера сокращается до размера меньше 900px, и пример сразу приобретает другой вид, все колонки становятся шириной 100%, но всё работает так, как и задумано.
А теперь ещё раз пройдёмся по этой таблице для понимания, что в ней написано:
.col-xs-
- стиль работает при ширине браузера меньше 768px, при всех других разрешениях больше 768px размер будет 100%..col-sm-
- стиль работает при ширине браузера больше 768px, если разрешение меньше 768px, то будет 100%..col-md-
- стиль работает при ширине браузера больше 992px.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 определяется первое значение, а, именно, размер окна браузера.