Однородная высота карточек в Bootstrap: решение без CSS

Быстрый ответ

Для того чтобы выровнять карточки Bootstrap по высоте, поместите их в flex-контейнер с установленными свойствами display: flex и flex-wrap: wrap. Для элементов .card задайте свойство flex: 1, чтобы они одновременно могли расширяться и сжиматься.

.flex-cards {
  display: flex;
  flex-wrap: wrap;
}

.flex-cards .card {
  flex: 1;
}

Ваш HTML будет выглядеть таким образом:

<div class="flex-cards">
  <div class="card-columns">
    <!-- Ваши карточки Bootstrap -->
  </div>
</div>

Такой подход поможет сохранить согласованность в адаптивном дизайне.

Подробное объяснение

Равномерное выравнивание карточек по высоте в столбце может показаться сложным. Однако, есть несколько эффективных методов:

Используйте вспомогательные классы

Bootstrap предлагает вспомогательные классы, такие как .d-flex и .align-items-stretch, готовые к использованию. Присвойте их контейнерам карточек для достижения нужного результата.

<div class="d-flex flex-wrap align-items-stretch">
  <div class="card">...</div>
  <div class="card">...</div>
  <!-- Остальные карточки -->
</div>

Подробнее об этом расскажет наш спикер на видео

Вертикальное заполнение пространства

С помощью класса .h-100 карточки смогут занять все доступное вертикальное пространство, сохраняя при этом правильное выравнивание.

<div class="card h-100">...</div>

Работаем с сеткой

Система сеток Bootstrap позволяет точно контролировать макеты, обеспечивая отзывчивость. Классы .row и .col помогут поддержать одинаковую высоту и легко настраивать макеты под различные экраны.

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">
      <div class="card h-100">...</div>
    </div>
    <!-- Остальные карточки в сетке -->
  </div>
</div>

Балансировка содержимого

Балансируйте содержимое внутри карточек для достижения единообразного внешнего вида. Воспользуйтесь .card-block для создания структуры, которая будет типичной для всех карточек.

Для любителей точности

Можно использовать функцию calc() в сочетании с классами Bootstrap для того чтобы точно настроить высоту карточек.

.card {
  height: calc(100% – 20px);
}

Избегайте задания минимальной высоты. Пользуйтесь отзывчивыми функциями Bootstrap, чтобы достичь желаемого результата.

Визуализация

Как выглядят карточки до применения Flexbox или Grid:

[📘📚, 📕, 📙📗📓]

И после:

.card-columns {
  display: flex;
  flex-wrap: wrap;
}

.card {
  height: 100%;
}

Тот результат, к которому вы придете после преобразования:

[📘📗📕, 📘📗📕, 📘📗📕]

Адаптивность вашего макета

Не забывайте о том что макет вашего сайта должен быть адаптивным:

<div class="row">
  <div class="col-12 col-md-6 col-lg-4">
    <div class="card h-100">...</div>
  </div>
  <!-- Адаптивные колонки и карточки -->
</div>

Откажитесь от фиксированной высоты

Основное правило для создания стильных макетов – избегать фиксированной высоты. Используйте margin-bottom для создания пространства между элементами и позволяйте содержимому определять размеры карточек.

Развивайте свои навыки

Обратитесь к документации Bootstrap для получения дополнительных советов и более глубокого понимания методик. При исследовании документации, вы найдете ответы на множество вопросов.

Полезные материалы

1. Карточки · Bootstrap — официальная документация Bootstrap.
2. Полное руководство по Flexbox | CSS-Tricks — всё о Flexbox.
3. Блоки одинаковой высоты в строках | CSS-Tricks — как сделать блоки равными по размеру.
4. Flex · Bootstrap — руководство Bootstrap по flex-утилитам.
5. Полное руководство по CSS Grid | CSS-Tricks — детальное понимание CSS Grid.
6. Flexbox | web.dev — изучение Flexbox и других методов CSS от web.dev.