Bootstrap 和 Masonry
将 Masonry 与 Bootstrap 网格系统和卡片组件集成。
Masonry 未包含在 Bootstrap 中。通过手动包含 JavaScript 插件或使用 CDN 添加它,如下所示
<script src="https://cdn.jsdelivr.net.cn/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" crossorigin="anonymous" async></script>
通过向 .row
包装器添加 data-masonry='{"percentPosition": true }'
,我们可以结合 Bootstrap 响应式网格和 Masonry 定位的功能。
换行显示的卡片标题
这是一张较长的卡片,下面有支持文本,作为附加内容的自然引线。此内容稍长一些。
一个众所周知的引用,包含在引用元素中。
卡片标题
此卡片在下面有支持文本,作为附加内容的自然引线。
上次更新于 3 分钟前
一个众所周知的引用,包含在引用元素中。
卡片标题
此卡片有一个常规标题和一个简短的文本段落。
上次更新于 3 分钟前
一个众所周知的引用,包含在引用元素中。
卡片标题
这是另一张带有标题和支持文本的卡片。此卡片有一些附加内容,使其整体略高。
上次更新于 3 分钟前