При использовании встроенных классов bootstrap col, когда я уменьшаю свою сетку до мобильного устройства, столбцы занимают 100% ширины строки, поэтому на мобильном устройстве это приводит к очень длинному вертикальному списку элементов, даже если на экране должно быть место. горизонтальная ось для размещения большего количества элементов.
Это для личного веб-сайта, который я делаю, это раздел курсов, где я выкладываю сетку курсов, которые мы хотели бы предложить. Проблема и то, что я уже пробовал, объясняется ниже.
Это HTML-код, который у меня есть:
<div class="container courses-container">
<div class="row justify-content-center courses-header no-gutters">
<div class="col-1">
<h2>Courses</h2>
</div>
</div>
<div class="row courses">
<div class="col-xs-1 col-md-2 course-item">
<div >
<img src="https://cdn4.iconfinder.com/data/icons/musical-instruments-22/50/22-512.png" alt="..." class="img-fluid" >
</div>
</div>
<div class="col-xs-1 col-md-2 course-item">
<img src="https://cdn4.iconfinder.com/data/icons/musical-instruments-22/50/22-512.png" alt="..." class="img-fluid" height="210px" width="200px" >
</div>
<div class="col-xs-1 col-md-2 course-item">
<img src="https://cdn4.iconfinder.com/data/icons/musical-instruments-22/50/22-512.png" alt="..." class="img-fluid" height="210px" width="200px" >
</div>
<div class="col-xs-1 col-md-2 course-item">
<img src="https://cdn4.iconfinder.com/data/icons/musical-instruments-22/50/22-512.png" alt="..." class="img-fluid" height="210px" width="200px" >
</div>
<div class="col-xs-1 col-md-2 course-item">
<img src="https://cdn4.iconfinder.com/data/icons/musical-instruments-22/50/22-512.png" alt="..." class="img-fluid" height="210px" width="200px" >
</div>
<div class="col-xs-1 col-md-2 course-item">
<img src="https://cdn4.iconfinder.com/data/icons/musical-instruments-22/50/22-512.png" alt="..." class="img-fluid" height="210px" width="200px" >
</div>
</div>
<div class="row courses">
<div class="col-xs-1 col-md-2 course-item">
<img src="https://cdn4.iconfinder.com/data/icons/musical-instruments-22/50/22-512.png" alt="..." class="img-fluid" height="210px" width="200px" >
</div>
<div class="col-xs-1 col-md-2 course-item">
<img src="https://cdn4.iconfinder.com/data/icons/musical-instruments-22/50/22-512.png" alt="..." class="img-fluid" height="210px" width="200px" >
</div>
<div class="col-xs-1 col-md-2 course-item">
<img src="https://cdn4.iconfinder.com/data/icons/musical-instruments-22/50/22-512.png" alt="..." class="img-fluid" height="210px" width="200px" >
</div>
<div class="col-xs-1 col-md-2 course-item">
<img src="https://cdn4.iconfinder.com/data/icons/musical-instruments-22/50/22-512.png" alt="..." class="img-fluid" height="210px" width="200px" >
</div>
<div class="col-xs-1 col-md-2 course-item">
<img src="https://cdn4.iconfinder.com/data/icons/musical-instruments-22/50/22-512.png" alt="..." class="img-fluid" height="210px" width="200px" >
</div>
<div class="col-xs-1 col-md-2 course-item">
<img src="https://cdn4.iconfinder.com/data/icons/musical-instruments-22/50/22-512.png" alt="..." class="img-fluid" height="210px" width="200px" >
</div>
</div>
</div>
Это CSS, который я использую:
.courses-header {
margin: 2em 0;
}
.carousel-container, .courses-container {
padding: 0;
}
@media (min-width: 720px) {
.courses {
margin: 3em 0;
}
}
@media only screen and (max-width: 767px) {
.course-item {
width: 33%;
}
}
Последний медиа-запрос в точке останова 767px «исправляет» проблему, ориентируясь на пользовательский класс, который я установил для каждого столбца, поэтому я заставляю их занимать только 33% ширины на небольших экранах, однако, если вы прокомментируете этого раздела и просмотрите этот пример на меньшем экране, и вы увидите, что каждый столбец будет располагаться на одной строке. Вот почему я также установил col-xs-1 для каждого элемента, но я думаю, что мне это не нужно, если я использую другой подход.
Это правильный способ сделать это, потому что мне кажется, что должен быть более простой способ, с помощью которого я могу контролировать правильное отображение сетки на небольших экранах.
Полный макет на больших экранах занимает 2 строки, и в каждой строке 6 столбцов. На небольших экранах такая компоновка невозможна, так как она слишком широкая.
Я ожидаю, что как только я изменю размер окна браузера на меньший, столбцы будут разбиваться на большее количество строк по вертикали, и они делают это, но без корректировки своей ширины с помощью медиа-запроса, каждый столбец разбивается на свою собственную строку, занимая 100% от нее, таким образом, он создает много вертикального пространства, и он не использует горизонтальное пространство должным образом, так как многие из них остаются пустыми.
В идеале он должен плавно разбивать элементы на большее количество строк, но при этом сохранять несколько столбцов в каждой строке, чем меньше экран, тем меньше элементов в каждой строке, но всегда он должен держать как минимум 2, если не 3 элемента рядом.
1 ответ
Используйте col-xs-2 на всех <div class="col-xs-1 col-md-2 course-item">
Удалите col-xs-1 и добавьте col-xs-2
Похожие вопросы
Новые вопросы
html
HTML (язык гипертекстовой разметки) — это язык разметки для создания веб-страниц и другой информации, отображаемой в веб-браузере. Вопросы относительно HTML должны включать минимальный воспроизводимый пример и некоторое представление о том, чего вы пытаетесь достичь. Этот тег редко используется отдельно и часто в паре с [CSS] и [JavaScript].
col-xs-*.. теперь простоcol-*, поэтому вы должны использоватьcol-1, а неcol-xs-1.col-xs-*наcol-2выглядит лучше, но теперь, по сути, это просто «сжимает» макет большого экрана до меньшего экрана. Мне интересно, есть ли способ увеличить количество строк, когда вы перейдете к меньшему размеру. По сути, на меньшем экране, если бы у меня было 3 строки или 4 строки, а затем равномерное разделение столбцов на них, это выглядело бы лучше, но единственный способ, который я знаю, как это сделать, — это написать дополнительный html и условно отобразить его с помощью медиа-запроса. (т.е. иметь другой html для небольших экранов)