Как вертикально протяжения столбцов с панелью внутри

Question

я использую самозагрузку 3 и у меня есть строка с 3-х столбцами с каждым из них, имеющего панель

<div class="row clearfix dashboard"> 
    <div class="col-md-4"> 
     <div class="panel panel-opaque"> 
     <div class="panel-heading"><h3 class="panel-title">Schneehöhen</h3> 
     </div> 
     <div class="panel-body"></div> 
     </div> 
    </div> 
    <div class="col-md-4"></div> 
    <div class="col-md-4"></div> 
</div> 

Панель имеет разную высоту, но я хочу иметь все они с одинаковой высотой. Я попытался использовать display: flex on row, но это повлияло только на столбцы с одинаковой высотой, панели остались прежними. Итак, как я могу это достичь?

Answer 1

Вот самое простое решение

<div class="row"> 
<div class="col-md-4" style="background-color: red"> 
    <div class="panel-heading"> 
     <h3 class="panel-title">Schneehöhen</h3> 

    </div> 
    <div class="panel-body"></div> 
    </div> 
    <div class="col-md-4" style="background-color: white">content</div> 
    <div class="col-md-4" style="background-color: blue "></div> 
</div> 

И использовать этот css с этим

.row[class*="col-"] { 
margin-bottom: -99999px; 
padding-bottom: 99999px; 
} 
.row { 
overflow: hidden; 
} 

или здесь это еще один способ сделать то же самое с этим css

.row { 
display: table; 
} 

.row [class*="col-"] { 
float: none; 
vertical-align: top; 
} 

Flexbox подход flexbox demo

.row-eq-height { 
display: -webkit-box; 
display: -webkit-flex; 
display: -ms-flexbox; 
display: flex; 
} 

Answer 2

Я понял теперь, как ее решить:

.row{ 
display:flex; 
} 

нисходящих цв нужны сгибать, а

.row [class*='col-']{ 
display:flex; 
} 

.panel{ 
flex:1 
}