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

Posted 2023-03-05

【中文标题】不同尺寸卡片的 Bootstrap 5 布局 - 如 Pinterest

【英文标题】：Bootstrap 5 layout for different sizes cards - like Pinterest

【发布时间】：2021-04-04 15:52:09

【问题描述】：

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

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

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

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

【问题讨论】：

使用 CSS 网格。不要搜索引导网格——它们是不同的。

【参考方案1】：

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

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

【参考方案2】：

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

【讨论】：

确实！这是一个砌体布局，CSS-Grids 可以提供最大的帮助。 CSS Grid 也有 grid-template-rows: masonry;可用:)

【参考方案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>

【参考方案4】：

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

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

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

https://codeply.com/p/yrjCBwUeKR

---

注意：其他人提到的 CSS 网格砌体（即：grid-template-rows: masonry;）选项目前仅适用于 Firefox，尚不推荐使用。

【讨论】：

谢谢，我还要补充一点，我必须使用 imagesloaded 来解决加载图像导致砌体看起来很奇怪的问题

在你的主 html 文件中没有这个就行不通