@dmitriu256

Как правильно выровнять блоки по высоте в Bootstrap, правильная ли реализация?

Правильно ли выравнивать блоки по высоте применяя свойство d-flex к каждой колонке (col) или есть более универсальное решение применяя свойства непосредственно к row?

<section class="test">
    <div class="container">
        <div class="row">
            <!-- Блок1 -->
            <div class="col-4 d-flex">
                <div class="block">
                    <p>Lorem ipsum dolor sit amet.</p>
                </div>
            </div>

            <!-- Блок2 -->
            <div class="col-4 d-flex">
                <div class="block">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam aspernatur doloribus ducimus
                        exercitationem impedit inventore ratione voluptatum.
                        Ab aliquid est natus, obcaecati officiis quae.thtyhtyh hyhyhy ythtyh htyhtyhy ythtyhtyhtyh</p>
                </div>
            </div>

            <!-- Блок3 -->
            <div class="col-4 d-flex">
                <div class="block">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, praesentium?</p>
                </div>
            </div>
        </div>
    </div>
</section>


.block
  width: 100%
  padding-bottom: 10px
  border: 2px solid red
  background: pink


Из документации
<div class="d-flex p-2 bd-highlight" >I'm a flexbox container!</div>


Что пробовал:
1. Применяя d- flex к row - результата не дало, т.к. row изначально флекс элемент
2. Обертка колонок в класс d-flex тоже результата не принесло.
3. Классический путь решения данной задачи
родительскому элементу над блоками задается свойство flex и как результат все элементы принимают высоту самого большого блока
5e5251ca523a1189448445.png
  • Вопрос задан
  • 954 просмотра
Пригласить эксперта
Ответы на вопрос 1
jt3k
@jt3k
Фронтендер, люблю работать и получать удовольствия
Как я понял , d-flex. Это некая утилита для назначения display: flex для элемента.

Если так то наверное это будет оверхедом для вашей задачи. Просто избавьтесь от div которые у вас в примере написаны без классов. Флекс-дети итак по умолчанию имеют свойство align-item: stretch; которое их растягивает до высоты максимального брата.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы