如何讓 Bootstrap 4 卡的列高度相同？

Bootstrap 4：列中的卡片高度相同

問題：

使用Bootstrap 4，列中的卡片不同高度基於標題文字長度。即使內容的高度不同，如何實現相同高度的卡片？

答案：

與擔憂相反，Bootstrap 4 列已經使用了 flexbox，這確保了它們本質上具有相同的高度。要讓卡片佔據各自列的整個高度，只需將h-100 類別加入卡片中，如以下程式碼片段所示：

<code class="html"><div class="col-md-4 col-sm-6 col-12">
  <div class="card h-100">
    ...
  </div>
</div></code>

其他注意事項：

• 避免浮動卡片，因為這是不必要的。
• 從 .row 中刪除 .card-deck 類別； .col-* 應該是 .row 的直接子級。

示範：

造訪 https://codeply.com/go/hKhPuxoovH 進行直播解決方案示範。

以上是如何讓 Bootstrap 4 卡的列高度相同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！