返回到文章

采纳

编辑于 4年前

Bootstrap5和Masonry

bootstrap5
bootstrap5
例子

Bootstrap5和Masonry

将Masonry与Bootstrap网格系统和卡片组件集成。

Masonry不包含在Bootstrap中。通过手动加入JavaScript插件或使用CDN这样的方式来添加它。

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>

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

示例如下

在线运行