Css 使引导卡占用空空间

我已经用bootstrap创建了一组卡片。由于卡片的高度不同（基于不同的文本长度），我希望卡片填充/放置在可用的空白处。我不知道如何使用引导网格系统来实现。提前谢谢

代码

 <div class="row justify-content-center">
    @foreach($advices as $key=>$advices)
        <div class="col-md-3">
            <div class="card p-2 mt-3">
                <div class="m-0 p-0 card-body">
                    <p class="mb-0">{{$advices->advice}}</p>
                    <small class="text-muted">
                    <cite class="float-right">~ {{$advices->alias}}</cite>
                    </small>
                </div>
            </div>
        </div>
    @endforeach
</div>

@foreach（$key=>$advices的通知）
{{$advices->advice}
~{{$advices->alias}
@endforeach

Bootstrap上有关于此案例的文档和教程。请检查一下

换行的卡片标题
这是一张较长的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
Lorem ipsum dolor sit amet，是一位杰出的献身者。整数赌注

在源代码标题中有名的人
卡片标题
此卡片具有以下支持文本，作为附加内容的自然引入
上次更新是在3分钟前

Lorem ipsum dolor sit amet，是一位杰出的献身者。整数posuere-erat

在源代码标题中有名的人
卡片标题
这张卡片有一个固定的标题，下面是简短的文本段落
上次更新是在3分钟前

Lorem ipsum dolor sit amet，是一位杰出的献身者。整数赌注

在源代码标题中有名的人
卡片标题
这是另一张卡片，其标题和支持文本如下。这张卡有一些额外的内容，使其整体略高
上次更新是在3分钟前

试试这个：或者这个：您可以按默认宽度将项目分组到列中

display:flex；弹性方向：列

，然后是标准行中的4列。这有点老套，但有些人会这么做：