Question

我在主面板内有两排嵌套面板。第一排有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>

Answer 1

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

JS

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

Answer 2

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

使用jquery将高度应用于.row

的子项

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

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

Answer 3

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

bootstrap嵌套面板在相等高度的网格中

3 个答案: