适用于不同尺寸卡片的 Bootstrap 5 布局 - 如 Pinterest

Question

我正在构建一个使用 Bootstrap 5 的网站，该网站将有一个部分显示几张这样的卡片

如您所见，每张卡片可能有不同的尺寸（取决于描述和缩略图）

我如何让它们变得紧凑，就像 Pinterest 主页一样

我需要使用什么类（在 bootstrap 5 中），或者什么布局

Answer 1

正如Bootstrap 5 文档中所述，Masonry JS 插件是此类“Pinterest”布局的推荐选项。Bootstrap 4 中使用的多列卡片布局（卡片列）在 Bootstrap 5 中不再可用。

使用 Masonry 插件很简单。只需使用适当的col-*类来设置跨列的数量，然后data-masonry包含row...的属性

<div class="container">
    <div class="row" data-masonry='{"percentPosition": true }'>
        <div class="col-*">
            ...
        </div>
    </div>
</div>

https://codeply.com/p/yrjCBwUeKR

注意：其他人提到的CSS grid masonry（即：）grid-template-rows: masonry;选项目前仅适用于Firefox，并且还不是推荐的选项。