垂直对齐3“面板 - 默认”，因此它们的高度都相同

Question

我有一行，在那一行我有3个部分都使用相同的代码生成但我不能保持它们相同的高度。我正在使用HTML 5并在“面板 - 默认”上使用Bootstrap 3.我尝试使用“min-height”但是当我添加链接到其中一个部分时，它只会扩展该部分。

我有点难以解释。

我的观点是：

<div class="col-sm-4">
    <div class="form-group">
        <div class="panel panel-default" style="min-height: 540px">
            <div class="panel-heading">
                <h3 class="panel-title"><%=title %></h3>
            </div>
            <div class="panel-body">
                <div class="form-horizontal"><%=template.ToString() %></div>
            </div>
        </div>
    </div>
</div>

这使得页面看起来像：

现在，由于每列使用相同的代码，如何将每个列保持在线，以便在第一列中添加/删除新链接。每个面板边框都以内联方式运行。

目前我有一个min-height设置，但下面的屏幕截图显示添加新链接时这不起作用。

我想在不使用CSS或Java / JQuery的情况下完成它。

Answer 1

我认为您正在寻找的是这样的......

http://www.bootply.com/iH9uUHI4Zs

.flex, .flex > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 0 auto;
}

它使用CSS flexbox将行中列的高度设置为最高的列。