Как правильно расположить элементы col на маленьких экранах в 1 ряд?

Question

При использовании встроенных классов начальной загрузки, когда я сжимаю сетку на мобильный, столбцы занимают 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 элементов. бок о бок.

Answer 1

Используйте col-xs-2 на всех <div class="col-xs-1 col-md-2 course-item">

Удалите col-xs-1 и добавьте col-xs-2