Bootstrap и Masonry

Интегрируйте Masonry с сеткой Bootstrap и компонентом карточек.

Masonry не входит в Bootstrap. Добавьте его, включив плагин JavaScript вручную или используя CDN следующим образом:


<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
  

Добавив data-masonry='{ "percentPosition": true }' к .row обертке, мы можем объединить полномочия отзывчивой сетки Bootstrap и позиционирования кирпичной кладки.


PlaceholderImage cap
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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

PlaceholderImage cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Card title

This card has a regular title and short paragraph of text below it.

Last updated 3 mins ago

PlaceholderCard image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

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