引導 - 與高度和寬度相同

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/