css - 如何使每列的面板高度相等

Question

在我的应用程序中，我有以下典型的 Bootstrap View 结构:

<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 列具有相同的高度。但面板没有。如何实现？

Answer 1

如果 .col-md-4 项已经定义了高度，您只需将 .h-100(高度:100%)添加到面板 class ="h-100 面板 panel-default".

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