Создание ряда карт в bootstrap высотой с самую высокую карту
работаю над небольшим личным проектом, чтобы проверить свои способности в Django и Bootstrap. В настоящее время я могу получить список тестов, детали которых отображаются в отдельной карточке с помощью цикла for, однако некоторые из тестов имеют разную высоту из-за того, что описание каждого теста имеет разную длину. Это выглядит ужасно, и мне интересно, как я могу сделать все карточки одинаковой высоты, как самая высокая/самая высокая карточка. Я пробовал использовать для этого флексбоксы, но первая карточка в ряду уменьшается в ширину.
Вот мой текущий код и то, как он выглядит в браузере:
<div class="row p-2 justify-content-center">
{% for obj in filter.qs %}
<div class="col-md-4 mt-4">
<div class="card p-2" id="quiz">
<div class="card-body">
<div class="row">
<div class="col-md-10">
<h5 class="card-title">{{ obj.Name }}</h5>
</div>
<div class="col-md-2 text-right">
<i class="far fa-heart"></i>
</div>
</div>
<h6 class="card-subtitle mb-2 text-muted">By: {{ obj.Author }}</h6>
<h6 class="card-subtitle mb-2 text-muted">Points: {{ obj.Points_Worth }}</h6>
<h6 class="card-subtitle mb-4 text-danger">Category: <a href="">{{ obj.Category }}</a></h6>
<p class="card-text">{{ obj.Description }}</p>
<a href="#" class="btn btn-primary w-100 mt-auto">Play Quiz</a>
</div>
</div>
</div>
{% endfor %}
</div>
В идеале, я бы хотел, чтобы все карточки были одинаковой высоты, несмотря на содержание в описании, а кнопка была выровнена по низу.
Я пробовал использовать javascript для получения всех столбцов с классом 'col-md-4' и использовать алгоритм максимума для получения наибольшей высоты, а затем применить это к каждому столбцу, однако мне не повезло с этим.
Я готов попробовать различные методы для достижения этой цели, поэтому любая помощь приветствуется! Если вам нужна дополнительная информация, не стесняйтесь спрашивать!
проблема была решена путем применения правильного CSS flexbox, возможно, я допустил ошибку при чтении предыдущего решения, так как то, которое я использую сейчас, работает идеально, применение h-100 к картам, применение d-flex и flex-column к телу карты и использование mt-auto для кнопки устранило проблему.
{% for obj in filter.qs %}
<div class="col-md-4 mt-4 justify">
<div class="card p-2 h-100" id="quiz">
<div class="card-body d-flex flex-column">
<div class="row">
<div class="col-md-10">
<h5 class="card-title">{{ obj.Name }}</h5>
</div>
<div class="col-md-2 text-right">
<i class="far fa-heart"></i>
</div>
</div>
<h6 class="card-subtitle mb-2 text-muted">By: {{ obj.Author }}</h6>
<h6 class="card-subtitle mb-2 text-muted">Points: {{ obj.Points_Worth }}</h6>
<h6 class="card-subtitle mb-4 text-danger">Category: <a href="">{{ obj.Category }}</a></h6>
<p class="card-text">{{ obj.Description }}</p>
<br>
<a href="#" class="btn btn-primary w-100 mt-auto">Play Quiz</a>
</div>
</div>
</div>