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 的定位功能。


Placeholder - Bootstrap 框架Image cap
換行顯示的卡片標題

這是一張較長的卡片,下方有支援文字,作為自然引導至其他內容。此內容稍長。

一個著名的引言,包含在區塊引用元素中。

Placeholder - Bootstrap 框架Image cap
卡片標題

這張卡片下方有支援文字,作為自然引導至其他內容。

最後更新時間為 3 分鐘前

一個著名的引言,包含在區塊引用元素中。

卡片標題

這張卡片有一個常規標題和下方的一小段文字。

最後更新時間為 3 分鐘前

Placeholder - Bootstrap 框架Card image

一個著名的引言,包含在區塊引用元素中。

卡片標題

這是一張有標題和下方支援文字的另一張卡片。這張卡片有一些其他內容,讓它整體上稍微高一點。

最後更新時間為 3 分鐘前