垂直对齐3“面板 - 默认”所以他们都是一样的高度

问题描述

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

I have a row and in that row I have 3 parts which all are using the same code to generate but I can not keep them the same height. I am using HTML 5 and also using Bootstrap 3. on the "panel panel-default" I have tried using a "min-height" but when I add link to one of the sections, it only expands that section.

我有点难以解释。

我的观点是：

<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>

这使得页面看起来像：

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

Now as each column is using the same code how can I keep each one in-line so if a new link was added/removed to one the first. each panel border runs inline.

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

At the present I have a min-height set but the screenshot below shows this doesn't work when a new link is added.

我想在不使用CSS或Java / JQuery的情况下这样做。

I would like to do it without the use of CSS or Java/JQuery.

推荐答案

我认为你要找的是这样的......

I think what you're looking for is something like this..

.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将行中列的高度设为高度最高的。

It uses CSS flexbox to make the height of the columns in a row the height of the tallest.

这篇关于垂直对齐3“面板 - 默认”所以他们都是一样的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！