时间戳

首页 > 解决方案 > Boostrap 4 - 卡片组和不同尺寸

html - Boostrap 4 - 卡片组和不同尺寸

问题描述

我想显示具有相同高度但大小不同的卡片，尊重 Boostrap 的网格。

如果我以卡片组为例：https ://jsfiddle.net/sb7t5y3x/ ，我只想让第一张卡片的大小为 col-6，对我来说最优雅的方式应该是：

<div class="card col-6"> .... </div>

但它不起作用，因为.card-deck > .card应用了 flex 1。

所以我试图用 col 包装我的卡片：

<div class="col-6">
    <div class="card"> ... </div>
</div>

但是 col 有填充，卡片有边距，所以我应用了 2 个边距（参见https://jsfiddle.net/applyss/vcgkujxp/，空格不规则）

是否有一种简单的标准方法可以在网格系统中保持相同高度的卡片？

标签： htmltwitter-bootstrapbootstrap-4

解决方案

这基本上是bootstrap 4 card-deck 的副本，其中包含不同宽度的卡片

您应该使用网格而不是卡片组。

“但是 col 有填充，卡片有边距，所以我应用了 2 个边距，.. 空格不规则”

发生这种情况是因为您没有始终如一地将所有 3 张卡片包装在列中。如果需要，您可以使用间距实用程序类来调整边距或填充。

<div class="container pt-3">
    <div class="row">
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-body">
                    ..
                </div>
            </div>
        </div>
        <div class="col-md">
            <div class="card h-100">
                <div class="card-body">
                    ..
                </div>
            </div>
        </div>
        <div class="col-md">
            <div class="card h-100">
                <div class="card-body">
                    ..
                </div>
            </div>
        </div>
    </div>
</div>

演示：https ://codeply.com/p/hFvvJ63Tef

推荐阅读