В Bootstrap 4 создание карточек одинаковой высоты и ширины может повысить визуальную привлекательность макета вашего веб-сайта. В этой статье мы рассмотрим различные методы достижения этого эффекта и приведем примеры кода для каждого подхода.

Метод 1: использование Flexbox
Flexbox — это мощный модуль макета CSS, который может помочь нам создавать карты одинаковой высоты и ширины в Bootstrap 4. Мы будем использовать предоставленные классы «d-flex» и «flex-fill». с помощью Bootstrap для достижения этой цели.

<div class="d-flex">
  <div class="card flex-fill">
    <!-- Card content goes here -->
  </div>
  <div class="card flex-fill">
    <!-- Card content goes here -->
  </div>
  <div class="card flex-fill">
    <!-- Card content goes here -->
  </div>
</div>

Метод 2: собственный CSS
Если вы предпочитаете более индивидуальный подход, вы можете использовать собственный CSS, чтобы установить одинаковую высоту и ширину для ваших карточек. Мы создадим класс CSS и применим его к каждому элементу карты.

<style>
  .equal-card {
    height: 100%;
    width: 100%;
  }
</style>
<div class="row">
  <div class="col">
    <div class="card equal-card">
      <!-- Card content goes here -->
    </div>
  </div>
  <div class="col">
    <div class="card equal-card">
      <!-- Card content goes here -->
    </div>
  </div>
  <div class="col">
    <div class="card equal-card">
      <!-- Card content goes here -->
    </div>
  </div>
</div>

Метод 3: решение на основе JavaScript
Если вам нужны динамические карточки одинаковой высоты и ширины на основе контента или взаимодействия с пользователем, вы можете использовать JavaScript для достижения этой цели. Вот пример использования jQuery:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(window).on('resize', function() {
    var maxHeight = 0;
    $('.card').each(function() {
      $(this).height('auto');
      var height = $(this).height();
      if (height > maxHeight) {
        maxHeight = height;
      }
    });
    $('.card').height(maxHeight);
  }).trigger('resize');
</script>
<div class="card">
  <!-- Card content goes here -->
</div>
<div class="card">
  <!-- Card content goes here -->
</div>
<div class="card">
  <!-- Card content goes here -->
</div>