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.
Заголовок карточки, который переносится на новую строку
Это более длинная карточка с вспомогательным текстом ниже как естественный ввод к дополнительному контенту. Этот контент немного длиннее.
A well-known quote, contained in a blockquote element.
Заголовок карточки
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 мин. назад
A well-known quote, contained in a blockquote element.
Заголовок карточки
Это еще одна карточка с заголовком и вспомогательным текстом ниже. У этой карты есть дополнительный контент, чтобы сделать ее в целом немного выше.
Последнее обновление: 3 мин. назад