如何在具有響應列數的 Bootstrap 4 卡組中實現相同的卡片高度？

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

場景：

實現Bootstrap 4 的功能以確保不同視窗大小的卡片高度相同。

問題：

預設情況下，無論視口大小如何，卡片組都會連續顯示四張卡片，從而導致不希望的內容大小調整

解1：網格列(Bootstrap 4 Alpha 2)

在Bootstrap 4 Flexbox 支援之前，解決方法涉及使用

;例如，col-*）的元素來控制卡片寬度。然後應用Flexbox 強制等高：

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

解決方案2：h-100 類別（Bootstrap 4 Alpha 6 及以上）

Flexbox 成為預設值Bootp 4 Alpha 6，出現了一個更簡單的解決方案：

<code class="css">.h-100 {
  height: 100%;
}</code>

將h-100 類別應用於卡片元素，自動將其高度設定為100%，使它們高度相等：

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

注意：

對於更具響應性的佈局，請考慮使用斷點類，例如d-*-col（例如d-md-col-6）來指定特定的列數螢幕尺寸。

以上是如何在具有響應列數的 Bootstrap 4 卡組中實現相同的卡片高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！