Bootstrap 和 Masonry
將 Masonry 與 Bootstrap 網格系統和卡片元件整合。
Masonry 未包含在 Bootstrap 中。請手動加入 JavaScript 外掛程式或使用 CDN,如下所示
<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" crossorigin="anonymous" async></script>
透過將 data-masonry='{"percentPosition": true }'
加入 .row
包覆器,我們可以結合 Bootstrap 的回應式網格和 Masonry 的定位功能。
換行顯示的卡片標題
這是一張較長的卡片,下方有支援文字,作為自然引導至其他內容。此內容稍長。
一個著名的引言,包含在區塊引用元素中。
卡片標題
這張卡片下方有支援文字,作為自然引導至其他內容。
最後更新時間為 3 分鐘前
一個著名的引言,包含在區塊引用元素中。
卡片標題
這張卡片有一個常規標題和下方的一小段文字。
最後更新時間為 3 分鐘前
一個著名的引言,包含在區塊引用元素中。
卡片標題
這是一張有標題和下方支援文字的另一張卡片。這張卡片有一些其他內容,讓它整體上稍微高一點。
最後更新時間為 3 分鐘前