HTML / CSS / Javascript: как сделать так, чтобы .col-sm мог заменить запрос @media
У меня есть этот код, чтобы отображать каждое изображение бок о бок (слева направо), но я хочу сделать так, чтобы, когда он находится в мобильной версии (max-width: 480 пикселей), он отображал изображения в 2 столбца (так 2 ряда). Вместо использования запроса @media мне было интересно, как это сделать через .col-sm? У меня есть ИЗОБРАЖЕНИЕ ИЗОБРАЖЕНИЕ ИЗОБРАЖЕНИЕ, и я хочу изменить формат, когда он отображается на мобильном дисплее, на:
ИЗОБРАЖЕНИЕ ИЗОБРАЖЕНИЕ
РИСУНОК
<div class = "col-9">
<div class = "card-group">
<div class = "card">
<img class = "card-img-top" src = "carrots.jpg" alt = "Card image cap">
</div>
<div class = "card">
<img class = "card-img-top" src = "beets.jpg" alt = "Card image cap">
</div>
<div class = "card">
<img class = "card-img-top" src = "asparagus.jpg" alt = "Card image cap">
</div>
</div>
Прошу прощения, если вопрос очень расплывчатый. Я все еще новичок и изучаю бутстрап
Я хочу перейти от того, что у меня есть прямо сейчас, когда изображения расположены бок о бок, к тому, когда оно сжато в мобильное представление, к этому: imgur.com/a/SckIH8S
должно быть это была опечатка. отредактировал
Ответы 1
Вам нужно присвоить своему элементу контейнера класс container-fluid, а затем соответственно дать его дочерним элементам класс col-xs-.
Например:
<div class = "container-fluid">
<div class = "col-md-4 col-xs-6">
<img>
</div>
<div class = "col-md-4 col-xs-6">
<img>
</div>
<div class = "col-md-4 col-xs-6">
<img>
</div>
</div>
Класс container-fluid сделает вашу страницу отзывчивой. col-md-4 разделит макет с 12 столбцами на три части равного размера, если ширина области просмотра составляет 992 пикселей или больше. col-xs-6 разделит макет на две части.
Подробнее об этом можно прочитать здесь
а, понятно. Спасибо! Я ценю это
HTML-код, который у вас есть с CSS, который вы вместе, определяет, как что-то отображается. Существует множество способов обернуть что-то, поскольку экран становится слишком маленьким, и есть много параметров, которые вы, возможно, захотите рассмотреть (центрирование, интервал по вертикали и т. д.) Задолго до того, как вы начнете писать код. Итак, я бы сначала в торговом центре сделал минимальную вещь, добавив туда html и css, а затем очень подробно описал, что вам нужно, когда ширина сокращается.