Макет карты
Помимо оформления содержимого карточек, Bootstrap включает в себя несколько вариантов компоновки серий карточек. На данный момент эти варианты компоновки ещё не являются адаптивными.
Группы карт
Используйте группы карточек, чтобы отображать карточки как единый прикреплённый элемент с колонками одинаковой ширины и высоты. Группы карточек изначально располагаются друг над другом, а с помощью display: flex; они становятся прикреплёнными и имеют одинаковые размеры, начиная с sm точки останова.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
При использовании групп карточек с колонтитулами их содержимое будет автоматически выравниваться.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This card has supporting text below as a natural lead-in to additional content.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Сеточные карты
Используйте систему сеток Bootstrap и её .row-colsклассы, чтобы управлять количеством столбцов сетки (вокруг ваших карточек), которые вы показываете в строке. Например, вот так .row-cols-1 карточки располагаются в одном столбце, а .row-cols-md-2 четыре карточки одинаковой ширины распределяются по нескольким строкам, начиная со средней точки перехода.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Измените его на .row-cols-3 и вы увидите, как оборачивается четвёртая карта.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Если вам нужна одинаковая высота, добавьте .h-100 к карточкам. Если вы хотите, чтобы высота по умолчанию была одинаковой, вы можете задать $card-height: 100% в Sass.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a short card.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Как и в случае с группами карточек, нижние части карточек будут автоматически выравниваться.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This card has supporting text below as a natural lead-in to additional content.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.