Система сеток Bootstrap 4 на экране Retina

у меня есть такой div:

<div class = "col-lg-4 col-xl-4 col-md-6 col-sm-12 px-0 p-4">

Когда я тестирую его на 27-дюймовом экране, он использует col-xl-2 и работает отлично, но когда я тестирую его на 13-дюймовом экране MacBook Pro с экраном retina, он также использует col-xl-2 и выглядит странно. Как я могу справиться с этим и указать размер столбца для экранов сетчатки?

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
0
2 547
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Пытаться:

col-md-4

или же

col-sm-4

Документация по загрузке (сетка)

Обновлять

Большой экран определяется из-за высокого разрешения дисплея сетчатки.

Вы можете установить свой собственный breakpoints в Bootstrap.

Настраиваемый Bootstrap 3.3

Возможно, ответ это может указать вам правильное направление.

В качестве альтернативы попробуйте это (источник):

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

Другие вопросы по теме