Bootstrap的面板具有相同的高度

Question

我有3个自举面板,一个接一个.它们的高度根据从数据库中检索的信息而变化.我希望它们中的3个的高度相匹配.如果其中一个信息较少,则无论如何都要将高度调整到较高的面板.我知道我必须使用display:table和display:table-cell但是当Bootstrap有一些嵌套的div来实现Panel视图时,它很混乱......你有什么建议？这是我的每个面板的代码(默认为Bootstrap示例):

           <div class="col-sm-3 col-sm-push-1">                 
                 <div class="panel panel-default">     
                    <div class="panel-body panelLoggedIn">
                        <a href="#">Example Link</a>                        
                        <a href="#">Example Link</a>
                        <a href="#">Example Link</a>
                        <a href="#">Example Link</a>
                        <a href="#">Example Link</a>
                        <a href="#">Example Link</a>
                        <a href="#">Example Link</a>
                        <a href="#">Example Link</a>
                    </div>
                </div>                  
            </div>

            <div class="col-sm-3 col-sm-push-1">                
                 <div class="panel panel-default">     
                    <div class="panel-body panelLoggedIn">
                        <a href="#">Example Link</a>                        
                        <a href="#">Example Link</a>
                    </div>
                </div>                  
            </div>

           <div class="col-sm-3 col-sm-push-1">                 
                 <div class="panel panel-default">     
                    <div class="panel-body panelLoggedIn">
                        <a href="#">Example Link</a>                        
                        <a href="#">Example Link</a>
                        <a href="#">Example Link</a>
                        <a href="#">Example Link</a>
                    </div>
                </div>                  
            </div>

Answer 1

如果您不想使用Flexbox并且确实想要支持旧版浏览器,请使用jquery.matchHeight.js.它响应迅速,体积小.

把.row柱子周围一类你的选择:

<div class="row equal-height-panels">
... bootstrap columns with panels inside
</div>

使用您创建的类初始化脚本:

  $(document).ready(function() {
      $('.equal-height-panels .panel').matchHeight();
  });

演示:http://jsbin.com/diyux/2

不要忘记.row周围的.container或.container-fluid,因为这会从.row上的负左右边距移除水平滚动条.如果没有意义,请了解有关引导网格的更多信息.