等高网格中的引导嵌套面板答案

【问题标题】：bootstrap nested panels in grid of equal heights等高网格中的引导嵌套面板
【发布时间】：2014-02-23 16:41:59
【问题描述】：

我在主面板中有两排嵌套面板。第一排有 3 个高度不等的面板。如何使 3 个面板与最高面板的高度相同（jsfiddle 链接中的面板 #3）？

这是 jsfiddle - http://jsfiddle.net/niner911/MgcDU/8905/

我希望面板 #1 和面板 #2 的高度与面板 #3 相同，或者最高面板的高度。

感谢您的帮助。

这是我的标记：

<div class="container">
<div class="panel panel-primary">
    <div class="panel-heading">outer</div>
    <div class="row">
        <div class="col-xs-4">
            <div class="panel panel-info">
                <div class="panel-heading">1</div>
                <div class="panel-body">
                    <div class="list-group">
                        <div class="list-group-item">111</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="panel panel-info">
                <div class="panel-heading">2</div>
                <div class="panel-body">
                    <div class="list-group">
                        <div class="list-group-item">222</div>
                        <div class="list-group-item">222</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="panel panel-info">
                <div class="panel-heading">3</div>
                <div class="panel-body">
                    <div class="list-group">
                        <div class="list-group-item">333</div>
                        <div class="list-group-item">333</div>
                        <div class="list-group-item">333</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <span>lower</span>
                </div>
                <div class="panel-body">
                      xyz
                </div>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

尝试使用map() 处理每个项目并获取最高面板的大小。然后将此高度应用于每个面板。

var heightTallest = Math.max.apply(null, $(".panel-info").map(function ()
{
return $(this).outerHeight();
}).get());
$('.panel-info').css({ height: heightTallest + 'px' });

【讨论】：

【解决方案2】：

更新的 jsfiddle： http://jsfiddle.net/MgcDU/8915/

使用 jquery 将高度应用于 .row 的子级

$('.row').each(function(){
 var RowHeight = $(this).innerHeight();
 $(this).children().css({ height: RowHeight + 'px' });  
});

并将 .panel 高度设置为您想要的大小，例如。 100%

【讨论】：

【解决方案3】：

如果你对浏览器兼容性限制没问题，你可以试试这个基于 CSS flexbox 的实验代码：https://github.com/twbs/bootstrap/pull/11851

【讨论】：