Bootstrap 与 Masonry

整合 瀑布流布局 使用 Bootstrap 网格系统和卡片组件。

Bootstrap 中不包含 Masonry。可以通过手动引入 JavaScript 插件,或使用 CDN 来添加,如下所示:


<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
  

通过添加 data-masonry='{"percentPosition": true }' 到 .row 封装器,我们可以结合 Bootstrap 响应式网格和 Masonry 定位的功能。


占位图图片说明
可以换行的卡片标题

这是一张更长的卡片,下面有辅助文本,自然引出更多内容。这部分内容稍微长一些。

引用块中的一句名言。

占位图图片说明
卡片标题

这张卡片下面有辅助文本,作为额外内容的自然引导。

最后更新于 3 分钟前

引用块中的一句名言。

卡片标题

这张卡片有一个常规标题,下面有一小段文字。

最后更新于 3 分钟前

占位图卡片图片

引用块中的一句名言。

卡片标题

这是另一张卡片,下面有标题和辅助文本。这张卡片还有一些额外的内容,使整体稍微高一些。

最后更新于 3 分钟前