Адаптивные карточки с выровненными нижними колонтитулами в Bootstrap 4.4 - PullRequest
Новая
       7

Адаптивные карточки с выровненными нижними колонтитулами в Bootstrap 4.4

0 голосов
/ 12 февраля 2020

С Bootstrap 4.4, я хотел бы иметь колоду карт с:

  • равной высоты (.h-100)
  • a .card-footer, выровненной внизу
  • адаптивный макет с количеством карт в ряду, определяемым шириной области просмотра

Кажется, что я не могу иметь все три из них одновременно, это правда?

Чтобы нижние колонтитулы совпали в нижней части карточек, их нужно поместить в .card-deck div, но это совсем не согласуется, например, с <div class="col-sm-12 col-md-6 col-lg-4">. Я также пытался добавить .row-cols-x класс к родителю .row, но это тоже не работает.

Возможно ли это в конце концов?

1 Ответ

0 голосов
/ 14 февраля 2020

Вы можете использовать компонент колода карт, чтобы заархивировать первые обе точки в вашем списке. Вот пример: 

<div class="card-deck">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">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.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Чтобы заархивировать третью точку, вы можете расширить ее в своих файлах s css следующим образом: 

.card-deck {
  @include media-breakpoint-only(xs) {
    column-count: 1;
  } 
  @include media-breakpoint-only(sm) {
    column-count: 2;
  }  
@include media-breakpoint-only(md) {
    column-count: 3;
  }
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}

Это устанавливает количество столбцов на точку останова. Это переписывает поведение по умолчанию (всегда 3 столбца, но только на xs)

...