如何使每列中的面板高度相等答案

【问题标题】：How to make panel height equal in each column如何使每列中的面板高度相等
【发布时间】：2019-10-13 20:10:17
【问题描述】：

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

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

【问题讨论】：

标签： css twitter-bootstrap ruby-on-rails-5

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

在 bootstrap 4 中，所有列都有显示 flex 并且列的高度是相同的。因此每列中的内容都会对另一列产生影响，因此如果内部内容具有全高，则它们的高度都相同。您需要在列中的内容上添加 h-100 类。
喜欢<div class="h-100 panel panel-default"> </div>
注意这个标签不应该有垂直边距。

【讨论】：