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

Question

在我的应用程序中，我有以下典型的引导视图结构：

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

标签： csstwitter-bootstrapruby-on-rails-5

Answer 1

如果.col-md-4项目已经定义了高度，您可以简单地将.h-100(height: 100%) 添加到 panel class="h-100 panel panel-default"。

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