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

Answer 1

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

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

Answer 2

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

如何使面板高度在每一列中相等

2 个答案: