如何使用 Bootstrap 4 建立響應式卡片組？

具有回應列數的Bootstrap 4 Card-Deck

在Bootstrap 4 中，card-deck 功能可讓您建立相同高度的卡片。但是，無論視口寬度如何，預設佈局每行顯示四張卡片。這可能不適合所有情況，您可能更喜歡根據可用視窗空間調整列數的響應式佈局。

要實現此目的，一種方法是使用 flexbox 顯示屬性，指定一個彈性值，強制在一定數量的列後換行。這可以使用col-- 網格類別來實現：

<code class="css">.row > div[class*="col-"] {
  display: flex;
  flex: 1 0 auto;
}</code>

透過新增此CSS，行中的每一列將表現得像一個Flexbox 項目，允許它們換行和調整它們的寬度會根據可用的視口空間動態變化。

但是，在 Bootstrap 4 Alpha 6 及更高版本中，這些欄位預設為啟用 Flexbox。因此，不需要額外的 CSS 即可實現所需的回應行為。相反，您可以簡單地使用 h-100 類將所有卡片設為全高。

範例：

<code class="html"><div class="card-deck-wrapper">
  <div class="row">
    <div class="h-100 col-sm-6 col-md-4 col-lg-3 col-xl-2">
      <div class="card">
        ...
      </div>
    </div>
    ...
  </div>
</div></code>

此解決方案提供了響應式卡片組根據視窗寬度調整列數，確保卡片保持對齊且高度相等。

以上是如何使用 Bootstrap 4 建立響應式卡片組？的詳細內容。更多資訊請關注PHP中文網其他相關文章！