Bootstrap 5 种不同尺寸卡片的布局 - 如 Pinterest

Question

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

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

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

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

Answer 1

不要为此使用 Bootstrap。使用 CSS 网格功能如果正在加载动态内容，它可以帮助您完成循环，并且非常容易设置。

.grid-container {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-gap: 20px;
    text-align: center;
    margin-top: 1rem;
    grid-template-columns: repeat(3, 1fr);
}

Answer 2

您想要实现的是 Masonry 布局。有不同的方法可以做到这一点，使用 CSS 网格、Flexbox 或使用 CSS' 列功能。查看 css-tricks.com 上的 this link 了解方法的详细信息。

Answer 3

#cont {
  columns:3;
  column-gap: 5px;
}
#cont>div {
  background: #c1c1ff;
  margin-bottom: 5px;
  break-inside:avoid;
}

<div id="cont">
<div style="height:30px"></div>
<div style="height:50px"></div>
<div style="height:70px"></div>
<div style="height:55px"></div>
<div style="height:90px"></div>
<div style="height:40px"></div>
<div style="height:60px"></div>
<div style="height:35px"></div>
</div>

Answer 4

与explained in the Bootstrap 5 docs一样，Masonry JS 插件是此类“Pinterest”布局的推荐选项。 Bootstrap 4 中使用的多列卡片布局（卡片列）在 Bootstrap 5 中不再可用。

使用 Masonry 插件很简单。只需使用适当的 col-* class 设置跨列数，然后 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中使用，暂不推荐使用选项。

Bootstrap 5 种不同尺寸卡片的布局 - 如 Pinterest

Bootstrap 5 layout for different sizes cards - like Pinterest

html

css

twitter-bootstrap

masonry

bootstrap-5