Css 自举'；s具有相同高度的面板

我有3个引导面板，一个接一个。它们的高度根据从数据库检索到的信息而变化。我希望他们三人的身高相匹配。如果其中一个面板的信息较少，请将高度调整到较高的面板。我知道我必须使用display:table和display:table单元格，但是由于Bootstrap有一些嵌套的div来实现面板视图，所以非常混乱。。。你有什么建议？下面是我的每个面板的代码（非常默认于引导示例）：

---

如果您不想使用Flexbox并且确实想支持传统浏览器，请使用。它反应灵敏，体积小

在列周围放置一个

.row

，其中包含您选择的类：

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

演示：

---

不要忘记.行周围的.container或.container流体，因为这将从.行的负左右边距中删除水平滚动条。如果没有意义，请了解有关引导网格的更多信息。

您可以使用此插件

---

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

只能通过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>

---

在

AFAIK中演示时，由于HTML表格的工作方式，您不能将

显示：表格

方法与

推送

/

拉取

类混合使用。注意，这是没有响应的。列不会在移动设备上堆叠，而是收缩。我们是否也需要为此包括任何js库？

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

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

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