如何在 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