引导 - 与高度和宽度相同

Question

我有一个div.row包含3片具有不同的内容面板：

<div class="row equal"> 

    <div class="col-md-4"> 
     <div class="panel panel-default"> 
     <div class="panel-body"> 
      <h3>Title 1</h3> 
      <p>This is a paragraph</p> 
      <p>This is a paragraph</p> 
     </div> 
     </div> 
    </div> 

    <div class="col-md-4"> 
     <div class="panel panel-default"> 
     <div class="panel-body"> 
      <h3>Title 2</h3> 
      <p>This is a paragraph</p> 
      <p>This is a paragraph</p> 
      <p>This is a paragraph</p> 
     </div> 
     </div> 
    </div> 

    <div class="col-md-4"> 
     <div class="panel panel-default"> 
     <div class="panel-body"> 
      <h3>Title 3</h3> 
      <p>This is a paragraph</p> 
     </div> 
     </div> 
    </div> 

</div> 

我想将所有面板具有相同的高度，无论其内容，就像这个话题Twitter Bootstrap 3 - Panels of Equal Height in a Fluid Row，所以我已经设置了我的.equal类。

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

的问题是，虽然身高设定为等于每个面板的宽度已经改变了所有的面板，所以现在我的面板不具有相同的宽度（默认的）。

有没有一种方法可以修正宽度，或者可能使用另一种方法在我的所有面板中具有相同的宽度和高度？

JSFiddle

Answer 1

我想你想是这样的：

设置为便于参考分开。

.equal { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
} 

div[class*='col-'] { 
    flex:1 1 auto; 
    background: lightblue; 
    display: flex; 
} 
.panel { 
    flex:1 0 100%; 
} 

Codepen Demo

Answer 2

如果你设置了家长和100％高度的所有儿童的身高呢？

.equal{ 
    height:200px; 
} 
.col-md-4, .panel{ 
    height:100%; 
} 

https://jsfiddle.net/aroxv143/1/