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();
  });

DEMO：http://jsbin.com/diyux/2

不要忘记.row周围的.container或.container-fluid，因为这会从.row上的负左右边距移除水平滚动条。如果没有意义，请详细了解自举网格。

Answer 2

只能通过css执行此操作。为面板添加行 div。

<div class="row equal">
   <div class="col-sm-3 col-sm-push-1"> 
     ...
   </div>
   <div class="col-sm-3 col-sm-push-1"> 
     ...
   </div>
   <div class="col-sm-3 col-sm-push-1"> 
     ...
   </div>
</div>

添加CSS

.equal, .equal > div[class*='col-'] {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 1 auto;
}

bootply

中的演示

Answer 3

您可以使用此插件

http://css-tricks.github.io/Equalizer/

http://tsvensen.github.io/equalize.js/

只需根据您的要求进行定制。

Bootstrap面板具有相同的高度

3 个答案: