Отображать два продукта данных при вводе медиазапроса 600px по двум столбцам

Question

Здравствуйте, ребята, кто-нибудь может подсказать мне о моей проблеме на моей веб-странице. Я не смог отобразить свой продукт на две строки в строке CSS / Bootrap im, используя bootstrap 4, и хочу настроить отображение моего продукта, вот пример изображения, которое я хочу сделать в моем списке товаров при вводе медиазапроса 600px

output

И теперь это моя работа, которую я хочу отображать на картинке
image2 image3

Answer 1

Марк Я работал над похожим проектом, используя bootstrap 4. Сначала я собираюсь предположить, что вы используете класс bootstrap img-Fluid для своего изображения в классе вашей карты. Далее, в вашем css для вашего класса карт в медиа-запросе вам нужно установить минимальную высоту, которая покрывает максимальную высоту любой карты, чтобы их было равномерно. Например, минимальная высота: 350 пикселей; Затем вам нужно установить ширину в медиазапросе 600px для вашего класса карт. Я рекомендую вам использовать мобильный режим реагирования в Google chrome и установить его на ширину 600 пикселей, а затем просто тестировать различные ширины пикселей, пока вы не сделаете это правильно. Если вы еще не использовали инструмент Google для мобильных устройств, щелкните правой кнопкой мыши браузер Google chrome и выберите «Осмотреть». В окне проверки щелкните значок рядом с элементами в левом верхнем углу. Теперь вы в мобильном представлении. В мобильном представлении слева щелкните раскрывающийся список с типом телефона и выберите «Ответить». Установите максимальную ширину 600. Вот код.

@media only screen and (max-width: 600px) {
    .card {
        width: 48%;
        min-height: 200px;
}