В моем приложении у меня есть следующее, типичное для структуры начальной загрузки:

<div class="row">
    <div class="col-lg-9">
        <div class="row">

        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                </div>
                <div class="panel-body">
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                </div>
                <div class="panel-body">
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                </div>
                <div class="panel-body">
                </div>
            </div>
        </div>

        </div>
    </div>
</div>

Длина содержимого внутри класса панели может отличаться для каждого столбца. Более того, в одной из них его часть отображается только при нажатии пользователем кнопки.

Как обеспечить, чтобы каждый столбец всегда имел одинаковую высоту? Я могу установить ту же высоту столбца с использованием display: flex, как показано ниже:

.col-md-4 {
    display: flex;
} 

Все 3 столбца имеют одинаковую высоту. Но панелей нет. Как этого добиться?

0
MaciekR 13 Окт 2019 в 01:21

2 ответа

Лучший ответ

Если элементы .col-md-4 уже имеют определенную высоту, вы можете просто добавить .h-100 (высота: 100%) на панели class="h-100 panel panel-default".

https://getbootstrap.com/docs/4.0/utilities/sizing/

1
Deykun 13 Окт 2019 в 09:46

В начальной загрузке 4 все столбцы имеют гибкость дисплея, а высота столбцов одинакова. поэтому содержимое каждого столбца влияет на другой столбец, поэтому, если внутреннее содержимое имеет полную высоту, все они будут одинаковой высоты. вам нужно добавить класс h-100 к содержимому в столбцах.
как <div class="h-100 panel panel-default"> </div>
Обратите внимание: этот тег не должен иметь вертикальных полей.

1
Shadi Golroonia 13 Окт 2019 в 12:00