Как сделать колонны одинаковой высоты в bootstrap?
1 ответ
от
otha_marks ,
6 месяцев назад
@kurt
Для создания колонн одинаковой высоты в Bootstrap можно использовать классы d-flex и flex-fill. Для этого нужно следующим образом оформить HTML-разметку:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="row">
<div class="col">
<div class="card">
<div class="card-body d-flex flex-fill">
<!-- Контент первой колонны -->
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body d-flex flex-fill">
<!-- Контент второй колонны -->
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body d-flex flex-fill">
<!-- Контент третьей колонны -->
</div>
</div>
</div>
</div>
|
В данном примере каждая колонна будет иметь одинаковую высоту, что обеспечивается классами d-flex и flex-fill. Класс d-flex делает контейнер каждой колонны блочным элементом с возможностью использования гибких элементов, а класс flex-fill заполняет доступное пространство внутри каждой колонны, делая их высоту одинаковой.
15