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

Question

情况：我有一排，有3列。我正在使用Bootrstrap原生网格系统。在每一列中都有一个面板，正文中有一些文字。

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

我该怎么做？

参考我的jsfiddle：https://jsfiddle.net/ae5wvdye/1/

这是代码

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

这就是我实际得到的，但这是错误的结果，从根本上说不太好。我希望每个面板都达到行高的100％，但是我无法使用CSS在行高的100％处（行高自动为最高面板的高度）。< / p>

Answer 1

以下是您的需求：

jQuery的：

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

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

这是一个工作示例： https://jsfiddle.net/ae5wvdye/6/

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

Answer 2

解决方案1：

使用flexbox https://jsfiddle.net/ae5wvdye/4/

@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;
    }
}

解决方案2：

使用CSS表格https://jsfiddle.net/ae5wvdye/7/

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

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

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

Answer 3

只需给.panel-body类一个最小高度。

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

当屏幕尺寸发生变化时，您可以使用媒体查询为面板主体的最小高度赋予不同的值。

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

HTML：

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

https://jsfiddle.net/ae5wvdye/3/