Bootstrap и Masonry

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

Masonry не входит в 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Заглушка изображения
Заголовок карточки, который переносится на новую строку

Это более длинная карточка с вспомогательным текстом ниже как естественный ввод к дополнительному контенту. Этот контент немного длиннее.

A well-known quote, contained in a blockquote element.

PlaceholderЗаглушка изображения
Заголовок карточки

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

Последнее обновление: 3 мин. назад

A well-known quote, contained in a blockquote element.

Заголовок карточки

У этой карточки есть обычный заголовок и короткий абзац текста под ним.

Последнее обновление: 3 мин. назад

PlaceholderИзображение карточки

A well-known quote, contained in a blockquote element.

Заголовок карточки

Это еще одна карточка с заголовком и вспомогательным текстом ниже. У этой карты есть дополнительный контент, чтобы сделать ее в целом немного выше.

Последнее обновление: 3 мин. назад