Bootstrap and Masonry
MasonryをBootstrapのグリッドシステムおよびカードコンポーネントと統合する。
MasonryはBootstrapに含まれていません。手動でJavaScript プラグインを含めるか、以下のようにCDNを使用して追加してください。:
<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
.rowラッパーにdata-masonry='{"percentPosition": true }'を追加することで、BootstrapのレスポンシブグリッドとMasonryのポジショニングの力を合わせることができます。
Card title that wraps to a new line
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
A well-known quote, contained in a blockquote element.
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
A well-known quote, contained in a blockquote element.
Card title
This card has a regular title and short paragraph of text below it.
Last updated 3 mins ago
A well-known quote, contained in a blockquote element.
Card title
This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.
Last updated 3 mins ago