如何在 1 行的小屏幕上正确堆叠 col 元素？

Question

当使用内置的引导 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 断点处的最后一个媒体查询通过定位自定义 class我为每一列设置的自定义 class 来“修复”问题，以便我让它们在较小的屏幕上仅占用 33% 的宽度，但是如果您注释掉该部分并在较小的屏幕上预览此示例，您会看到每一列基本上都位于一行上。 这就是为什么我还在每个项目上设置 col-xs-1 但我认为如果我使用另一种方法我不需要它。

这是正确的方法吗，因为对我来说，似乎应该有一种更简单的方法来控制网格在较小的屏幕上正确显示。

大屏幕上的完整布局占用 2 行，每行有 6 列。 在较小的屏幕上，这种布局是不可能的，因为它太宽了。

我希望一旦我将浏览器 window 调整为更小的浏览器，cols 将垂直分成更多行并且它们会这样做，但没有通过媒体查询调整它们的宽度，每列会占用它自己的行，占它的 100%，因此它创建很多垂直空间，它没有正确使用水平空间，因为它有很多是空的。

理想情况下，它应该平滑地将项目分成更多行，但每行保留几列，屏幕越小，每行上的项目越少，但始终应保持至少 2 个，如果不是 3 个项目并排。

Answer 1

在所有<div class="col-xs-1 col-md-2 course-item">上使用col-xs-2

删除col-xs-1并添加col-xs-2