Bootstrap HTML - Устройство средних размеров регистрируется как большое

Question

У меня были проблемы с сеткой Bootstrap на разных устройствах. Согласно документации Bootstrap, размеры столбцов в HTML зависят от размера окна устройства. E.g.:

Очень маленький 576 пикселей, Маленький> = 768 пикселей, Средний> = 992 пикселей, Большой> = 1200 пикселей

Однако в том, что следует считать средним устройством (повернутый iPad размером 1024 x 768 в Google Chrome Developer Tools), Bootstrap рассматривает большое устройство. Мой код выглядит так:

<div class="col-lg-2 col-md-4 col-sm-4">

В альбомной ориентации у iPad был элемент div с размером столбца 2, чего не должно быть. Я провел тест журнала консоли, чтобы убедиться, что размер экрана действительно равен 1024px. Есть идеи, почему это может происходить?

Answer 1

Проблема в том, что ваша математика немного не соответствует тому, как Bootstrap вычисляет их точку останова, путая большую точку останова (>= 992px) с очень большой точкой останова (>= 1200px).

Хотя ваш iPad не попадает в дополнительную большую точку останова (которая использует префикс .col-xl-), он попадает в большую точку останова (который использует префикс .col-lg-), и, таким образом, класс .col-lg-2 применяется правильно. Для этого ваш элемент занимает две колонки.

См. на следующем рисунке для удобного списка точек останова и соответствующих им классов: