Как сделать высоту панели равной в каждом столбце - PullRequest
Новая
       22

Как сделать высоту панели равной в каждом столбце

0 голосов
/ 13 октября 2019

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

<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 столбца имеют одинаковую высоту. Но панелей нет. Как этого добиться?

Ответы [ 2 ]

1 голос
/ 13 октября 2019

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

1 голос
/ 13 октября 2019

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

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

...