不同尺寸卡片的 Bootstrap 5 布局——比如 Pinterest [英] Bootstrap 5 layout for different sizes cards - like Pinterest

问题描述

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

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

如何使它们紧凑，就像 Pinterest 主页一样

我需要使用什么类(在引导程序 5 中)，或者什么布局

解决方案

As 解释在 Bootstrap 5 文档中，Masonry JS 插件是此类Pinterest"的推荐选项.布局.Bootstrap 4 中使用的多列卡片布局(card-columns)在 Bootstrap 5 中不再可用.

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

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

https://codeply.com/p/yrjCBwUeKR

<小时>

注意:其他人提到的 CSS grid masonry(即:grid-template-rows: masonry;)选项目前只适用于 Firefox，还不是推荐选项.

I am building a web that would use Bootstrap 5, the web would have a section which displays several cards like this

As you can see, each card may have different sizes (Depending on the description and thumbnail)

How do I make them compact, as in like the Pinterest homepage

What class do I need to use (In bootstrap 5), or what layout

解决方案

As explained in the Bootstrap 5 docs, the Masonry JS plugin is the recommended option for this type of "Pinterest" layout. The multi-column card layout (card-columns) that was used in Bootstrap 4 is no longer available in Bootstrap 5.

Using the Masonry plugin is easy. Just use the appropriate col-* class to set the number of columns across, and then the data-masonry attribute on the containing row...

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

https://codeply.com/p/yrjCBwUeKR

---

Note: The CSS grid masonry (ie: grid-template-rows: masonry;) option mentioned by others currently only works in Firefox, and is not yet a recommended option.

这篇关于不同尺寸卡片的 Bootstrap 5 布局——比如 Pinterest的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！