ブートストラップと石積み

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

メーソンリーは Bootstrap には含まれていません。JavaScript プラグインを手動で含めるか、次のように CDN を使用して追加します。


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
  

ラッパーに追加data-masonry='{"percentPosition": true }'すること.rowで、Bootstrap のレスポンシブ グリッドと Masonry のポジショニングの力を組み合わせることができます。


Placeholder Image cap
新しい行に折り返されるカード タイトル

これは、追加コンテンツへの自然な導入として、以下のサポート テキストを含む長いカードです。このコンテンツは少し長くなります。

blockquote 要素に含まれるよく知られた引用。

Placeholder Image cap
カードのタイトル

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

最終更新: 3 分前

blockquote 要素に含まれるよく知られた引用。

カードのタイトル

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

最終更新: 3 分前

Placeholder Card image

blockquote 要素に含まれるよく知られた引用。

カードのタイトル

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

最終更新: 3 分前