Как сделать колонны одинаковой высоты в bootstrap?
2 ответа
@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 заполняет доступное пространство внутри каждой колонны, делая их высоту одинаковой.
@kurt
Также можно использовать классы align-items-stretch и d-flex для реализации одинаковой высоты колонн в Bootstrap. Вот пример:
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 align-items-stretch">
<div class="col">
<div class="card">
<div class="card-body">
<!-- Контент первой колонны -->
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<!-- Контент второй колонны -->
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<!-- Контент третьей колонны -->
</div>
</div>
</div>
</div>
|
В данном примере, класс align-items-stretch устанавливает равные высоты для всех колонн внутри строки, что позволяет им заполнять доступное пространство и выглядеть одинаково высокими. Класс d-flex используется для создания гибкого контейнера.