Html Boostrap 3：如何强制布局列的内容具有相同的高度？

情境：我有一行，有三列。我正在使用Bootrstrap本机网格系统。每列中都有一个面板，正文中有一些文本

我希望每个面板具有相同的八个，即使文本没有填充面板主体

我该怎么做

关于我的JSFIDLE：

这是密码

<div class="row">

    <div class="col-sm-4">

        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Step 1</h3>
            </div>
            <div class="panel-body">
                <p>
                    dsadj akshdajksh dkashdjk ahskdjhaskjh dashdjkasdasdasd 
                    asdasdas lkaskljdasklj ldajskljdlasjdlaj sldaskdlkajklsdasd as
                </p>
            </div>
        </div>

    </div>

    <div class="col-sm-4">

        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Step 2</h3>
            </div>
            <div class="panel-body">
                <p>
                    dsadj akshdajksh dkashdjk ahskdjhaskjh dashdjkasdasdasd 
                    asdasdas lkaskljdasklj ldajskljdlasjdlaj sldaskdlkajklsdasd as
                </p>
                <p>
                    dsadj akshdajksh dkashdjk ahskdjhaskjh dashdjkasdasdasd 
                    asdasdas lkaskljdasklj ldajskljdlasjdlaj sldaskdlkajklsdasd as
                </p>
                <p>
                    dsadj akshdajksh dkashdjk ahskdjhaskjh dashdjkasdasdasd 
                    asdasdas lkaskljdasklj ldajskljdlasjdlaj sldaskdlkajklsdasd as
                </p>
            </div>
        </div>

    </div>

    <div class="col-sm-4">

        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Step 3</h3>
            </div>
            <div class="panel-body">
                <p>
                    dsadj akshdajksh dkashdjk ahskdjhaskjh dashdjkasdasdasd 
                    asdasdas lkaskljdasklj ldajskljdlasjdlaj sldaskdlkajklsdasd as
                </p>
                <p>
                    dsadj akshdajksh dkashdjk ahskdjhaskjh dashdjkasdasdasd 
                    asdasdas lkaskljdasklj ldajskljdlasjdlaj sldaskdlkajklsdasd as
                </p>
            </div>
        </div>

    </div>

</div>

第一步

dsadj akshdajksh dkashdjk ahskdjhaskjh DASHDJKASDASD
asdasdas lkaskljdasklj LDAJSKLJDLAJDLAJ SLDASKDLKAJKLSDAS

步骤2

dsadj akshdajksh dkashdjk ahskdjhaskjh DASHDJKASDASD
asdasdas lkaskljdasklj LDAJSKLJDLAJDLAJ SLDASKDLKAJKLSDAS


dsadj akshdajksh dkashdjk ahskdjhaskjh DASHDJKASDASD
asdasdas lkaskljdasklj LDAJSKLJDLAJDLAJ SLDASKDLKAJKLSDAS


dsadj akshdajksh dkashdjk ahskdjhaskjh DASHDJKASDASD
asdasdas lkaskljdasklj LDAJSKLJDLAJDLAJ SLDASKDLKAJKLSDAS

步骤3

dsadj akshdajksh dkashdjk ahskdjhaskjh DASHDJKASDASD
asdasdas lkaskljdasklj LDAJSKLJDLAJDLAJ SLDASKDLKAJKLSDAS


dsadj akshdajksh dkashdjk ahskdjhaskjh DASHDJKASDASD
asdasdas lkaskljdasklj LDAJSKLJDLAJDLAJ SLDASKDLKAJKLSDAS

这是我实际得到的结果，但这是错误的结果，理论上不太好。我希望每个面板都位于行高的100%，但我无法使用CSS将其聚焦在行高的100%（行高自动为最高面板的高度）

---

只需为.panel车身等级指定最低高度即可

.panel-body { min-height: 300px; }

当屏幕大小更改时，可以使用媒体查询为面板主体的最小高度指定不同的值

@media screen and (max-width: 480px) {
    .panel-body { min-height: 100px; }
}

HTML:

第一步

dsadj akshdajksh dkashdjk ahskdjhaskjh DASHDJKASDASD
asdasdas lkaskljdasklj LDAJSKLJDLAJDLAJ SLDASKDLKAJKLSDAS

步骤2

dsadj akshdajksh dkashdjk ahskdjhaskjh DASHDJKASDASD
asdasdas lkaskljdasklj LDAJSKLJDLAJDLAJ SLDASKDLKAJKLSDAS


dsadj akshdajksh dkashdjk ahskdjhaskjh DASHDJKASDASD
asdasdas lkaskljdasklj LDAJSKLJDLAJDLAJ SLDASKDLKAJKLSDAS


dsadj akshdajksh dkashdjk ahskdjhaskjh DASHDJKASDASD
asdasdas lkaskljdasklj LDAJSKLJDLAJDLAJ SLDASKDLKAJKLSDAS

步骤3

dsadj akshdajksh dkashdjk ahskdjhaskjh DASHDJKASDASD
asdasdas lkaskljdasklj LDAJSKLJDLAJDLAJ SLDASKDLKAJKLSDAS


dsadj akshdajksh dkashdjk ahskdjhaskjh DASHDJKASDASD
asdasdas lkaskljdasklj LDAJSKLJDLAJDLAJ SLDASKDLKAJKLSDAS

以下是您需要的：

jQuery：

var $maxH = 0;
$('.panel').each(function() {
    if( $(this).outerHeight() > $maxH ) {
        $maxH = $(this).outerHeight();
    }
});

$('.panel').outerHeight($maxH);

以下是一个工作示例：

---

这将获得最高面板的高度，并将其设置为其他面板的高度

解决方案1:

使用flexbox

解决方案2:

使用CSS表

---

我不想使用最小高度。它不想在2015年使用像素！css2真的没有原生方式吗？我的很多用户仍然使用旧的浏览器（叹气…），我更新了答案，请看一看。这是对css表的支持。除了这两个或使用JS，我不认为还有其他好的解决方案，但我可能错了

var $maxH = 0;
$('.panel').each(function() {
    if( $(this).outerHeight() > $maxH ) {
        $maxH = $(this).outerHeight();
    }
});

$('.panel').outerHeight($maxH);

@media(min-width: 768px) {
    .flex {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;

        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .item {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
}

@media(min-width: 768px) {
    .table {
        display: table;
    }

    .item {
        display: table-cell;
        float: none;
        height: 100%;
    }    

    .panel {
        height: 100%;
        display: table;
    }
}