如何在 Bootstrap 4 中建立具有可變卡片寬度的響應式卡片組？

具有可變卡寬的Bootstrap 4 Card-Deck

問題：

問題：

問題：

解決方案：

要根據視窗大小建立具有不同卡片寬度的響應式卡片組，您可以實現以下步驟：

1.消除Card-Deck 的使用：

card-deck 類別使用表格單元格佈局，這限制了靈活性。相反，請使用網格列類別（例如 col-sm-4、col-lg-2）來定義卡片寬度。

.row > div[class*='col-'] {
  display: flex;
  flex: 1 0 auto;
}

2。啟用 Flexbox：

Bootstrap 4 Alpha 6 及更高版本預設使用 Flexbox。但是，如果您使用的是早期版本，則可能需要使用以下CSS 手動啟用它：

<div class="card h-100">
  ...
</div>

3.設定卡片高度：

為了確保所有卡片具有相同的高度，請為每張卡片加上h-100 類：

4。反應斷點：

<div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
  ...
</div>

使用col--

類別為特定視口尺寸（即螢幕寬度）定義不同的卡片寬度：

<div class="row">
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
</div>

範例程式碼：此解決方案可讓您建立一個響應式卡片組，根據視窗大小調整大小，確保您的佈局適應不同的螢幕。

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