如何在 Bootstrap 4 中建立響應式卡片組？

基於視口的列數的Bootstrap 4 Card-Deck

在Bootstrap 4 中建立具有響應式列數的卡片組需要對網格系統和Bootstrap 中引入的新Flexbox功能有一定的了解4.

使用網格列

我們可以使用網格col-*，而不是依賴使用表格單元格顯示屬性的卡片組類別類別來指定所需的列寬。這使我們能夠更好地控制佈局，並允許我們創建響應式設計。

啟用 Flexbox

在 Bootstrap 4 中，預設啟用 Flexbox。但是，如果您使用的是舊版本或想要手動啟用Flexbox，請新增以下CSS 規則：

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

設定相等高度

要使由於卡片高度相等，我們可以利用Flexbox 的功能來自動調整其子項的高度以符合最高的子項。只需將 h-100 類別新增至每張卡，這將使其高度為 100% 並拉伸以匹配列中最高的卡。

<code class="html"><div class="row">
  <div class="col-6 h-100">
    <div class="card">...</div>
  </div>
  <div class="col-4 h-100">
    <div class="card">...</div>
  </div>
  <div class="col-2 h-100">
    <div class="card">...</div>
  </div>
</div></code>

透過結合這些技術，您可以創建 Bootstrap 4 卡- 甲板適應不同的視口尺寸，確保卡片保持相同的高度，並根據可用空間調整適當的尺寸。

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