ブートストラップ3フレックスボックスの問題

Question

フレックスボックスをブートストラップ3列で使用しようとすると問題が発生しているようです。 Iは、CSSとon jsfiddle here

<div class="col-xs-12 col-sm-6 col-lg-3 widget-header-item"> 
    <div class="panel panel-primary pmd-z-depth"> 
     <div class="panel-heading">Box 1</div> 

     <div class="panel-body"> 
      <table class="col-md-12 text-left"> 
       <tr> 
        <td>Key</td> 
        <td>Value</td> 
       </tr> 
       <tr> 
        <td>Key</td> 
        <td>Value</td> 
         <td>Value</td> 
       </tr> 
       <tr> 
        <td>Key</td> 
        <td>Value</td> 
       </tr> 
      </table> 
     </div> 
    </div> 
</div> 

<div class="col-xs-12 col-sm-6 col-lg-3 widget-header-item"> 
    <div class="panel panel-primary pmd-z-depth"> 
     <div class="panel-heading">Box 2</div> 
     <div class="panel-body"> 
      <table class="col-md-12 text-left"> 
       <tr> 
        <td>Key</td> 
        <td>Value</td> 
       </tr> 
      </table> 
     </div> 
    </div> 
</div> 

<div class="col-xs-12 col-lg-6 widget-header-item"> 
    <div class="panel panel-primary pmd-z-depth"> 
     <div class="panel-heading">Box 3</div> 
     <div class="panel-body"> 
     <p>Larger body of text here</p> 
     <p>Larger body of text here</p> 
     <p>Larger body of text here</p> 
     <p>Larger body of text here</p> 
     <p>Larger body of text here</p> 
     <p>Larger body of text here</p> 
     </div> 
    </div> 
</div> 

をプレビューすることができる以下のコードがあります。私はいくつかの異なるCSSスニペットを試みたが、私はどちらか等しい幅カラムで終わる

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

を私はcol-xs- *が持続するようにしたいとは思っていません。あるいは、同じ高さを得ることができますが、再び幅を落とします。

私が達成しようとしているのは、すべての3つのパネルで同じ高さですが、考慮するクラスの列幅です。

私が紛失しているものについてのガイダンスは大変ありがとうございます。

Answer 1

widget-header-divの場合はdisplay: flex、.panelの場合はheight: 100%を追加できます。また、列の高さも同じになります。

レスポンスの文脈で幅を考慮する場合は、フレックスボックスをラップにすることができます。

下記を参照のデモ：

.widget-header-div { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.widget-header-item .panel { 
 
    height: 100%; 
 
} 
 
.widget-header-item { 
 
    margin-bottom: 20px; 
 
}

<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
 

 
<div class="col-xs-12 widget-header-div"> 
 

 
    <div class="col-xs-12 col-sm-6 col-lg-3 widget-header-item"> 
 
    <div class="panel panel-primary pmd-z-depth"> 
 
     <div class="panel-heading">Box 1</div> 
 

 
     <div class="panel-body"> 
 
     <table class="col-md-12 text-left"> 
 
      <tr> 
 
      <td>Key</td> 
 
      <td>Value</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Key</td> 
 
      <td>Value</td> 
 
      <td>Value</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Key</td> 
 
      <td>Value</td> 
 
      </tr> 
 
     </table> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-xs-12 col-sm-6 col-lg-3 widget-header-item"> 
 
    <div class="panel panel-primary pmd-z-depth"> 
 
     <div class="panel-heading">Box 2</div> 
 
     <div class="panel-body"> 
 
     <table class="col-md-12 text-left"> 
 
      <tr> 
 
      <td>Key</td> 
 
      <td>Value</td> 
 
      </tr> 
 
     </table> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-xs-12 col-lg-6 widget-header-item"> 
 
    <div class="panel panel-primary pmd-z-depth"> 
 
     <div class="panel-heading">Box 3</div> 
 
     <div class="panel-body"> 
 
     <p>Larger body of text here</p> 
 
     <p>Larger body of text here</p> 
 
     <p>Larger body of text here</p> 
 
     <p>Larger body of text here</p> 
 
     <p>Larger body of text here</p> 
 
     <p>Larger body of text here</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div>