ブートストラップと Masonry

Masonry をブートストラップのグリッドシステムおよびカードコンポーネントと統合します。

Masonry はブートストラップに含まれていません。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 ラッパーに追加することで、ブートストラップのレスポンシブグリッドと Masonry のポジショニングのパワーを組み合わせることができます。


Placeholder Image cap
新しい行に折り返すカードのタイトル

これは追加コンテンツへの自然な導入として下にサポートテキストがある長いカードです。このコンテンツは少し長くなっています。

引用ブロック要素に含まれる有名な引用。

Placeholder Image cap
カードタイトル

このカードには、追加コンテンツへの自然な導入として下にサポートテキストがあります。

最終アップデートが 3 分前

引用ブロック要素に含まれる有名な引用。

カードタイトル

このカードには通常のタイトルがあり、その下には短いテキストの段落があります。

最終アップデートが 3 分前

Placeholder Card image

引用ブロック要素に含まれる有名な引用。

カードタイトル

これはタイトルとサポートテキストがある別のカードです。このカードには全体の高さを少し大きくするための追加のコンテンツがあります。

最終アップデートが 3 分前