Bootstrap row-eq-height не работает

Question

Я делаю паутину с Bootstrap, и мне нужны столбцы деревьев, чтобы иметь одинаковую высоту, я пробовал разные вещи (, http://www.bootply.com/GYU9zrCPdl,), но ничего не работает я, прямо сейчас, я пытаюсь использовать row-eq-height, но он тоже не работает. ЭРВО в мой HTML

  <div class="container "> 
      <div class="row row-eq-height"> 
       <div class="col-md-4 text-center"> 
        <h4 class="fase3">Identificación y estructuración del proyecto productivo en las fases de idea, perfil, prefactibilidad y factibilidad.</h4> 
       </div> 
       <div class="col-md-4 text-center"> 
        <h4 class="fase3">Gestión del montaje de la unidad productiva.</h4> 
       </div> 
       <div class="col-md-4 text-center"> 
        <h4 class="fase3">Gestión del montaje de la unidad productiva y gestión de la operación del proyecto.</h4> 
       </div> 
      </div> 
     </div> 

И CSS

.fase{ 
color: #ffffff; 
background-color: #119c21; 
font-size: 1.5em; 
font-weight: bold; 
text-align: center; 
padding-top: 3%; 
padding-bottom: 3%; 
margin-bottom: 0; 
} 

.fase2{ 
    margin-top: 0; 
    color: #ffffff; 
    background-color: #42c250; 
    font-size: 1.3em; 
    font-weight: normal; 
    text-align: center; 
    padding-top: 4%; 
    padding-bottom: 4%; 
    margin-bottom: 0; 
} 

.fase3{ 
    margin-top: 0; 
    color: #119c21; 
    background-color: #c2ffca; 
    font-size: 1.3em; 
    font-weight: normal; 
    text-align: center; 
    padding-top: 4%; 
    padding-bottom: 4%; 
    margin-bottom: 0; 
} 

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

Если кто-нибудь знает, как решить эту проблему, я действительно aprecciated

Answer 1

Столбцы (розовый цвет) являются равна высоте ,

.fase { 
 
    color: #ffffff; 
 
    background-color: #119c21; 
 
    font-size: 1.5em; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    padding-top: 3%; 
 
    padding-bottom: 3%; 
 
    margin-bottom: 0; 
 
} 
 
.fase2 { 
 
    margin-top: 0; 
 
    color: #ffffff; 
 
    background-color: #42c250; 
 
    font-size: 1.3em; 
 
    font-weight: normal; 
 
    text-align: center; 
 
    padding-top: 4%; 
 
    padding-bottom: 4%; 
 
    margin-bottom: 0; 
 
} 
 
.fase3 { 
 
    margin-top: 0; 
 
    color: #119c21; 
 
    background-color: #c2ffca; 
 
    font-size: 1.3em; 
 
    font-weight: normal; 
 
    text-align: center; 
 
    padding-top: 4%; 
 
    padding-bottom: 4%; 
 
    margin-bottom: 0; 
 
} 
 
.row.row-eq-height { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
} 
 
.col-md-4 { 
 
    background: pink; 
 
    border: 1px solid red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container "> 
 
    <div class="row row-eq-height"> 
 
    <div class="col-md-4 text-center"> 
 
     <h4 class="fase3">Identificación y estructuración del proyecto productivo en las fases de idea, perfil, prefactibilidad y factibilidad.</h4> 
 
    </div> 
 
    <div class="col-md-4 text-center"> 
 
     <h4 class="fase3">Gestión del montaje de la unidad productiva.</h4> 
 
    </div> 
 
    <div class="col-md-4 text-center"> 
 
     <h4 class="fase3">Gestión del montaje de la unidad productiva y gestión de la operación del proyecto.</h4> 
 
    </div> 
 
    </div> 
 
</div>

Если вы хотите, чтобы фон элемента заголовка расширить весь путь вниз, вы должны сделать их 100% высокий из column..so я добавил это в этом Codepen Demo

.col-md-4 { 
    background: pink; 
    border:1px solid grey; 
    display: flex; 
    flex-direction: column; 
} 

.col-md-4 h4 { 
    flex:1; 
} 

Answer 2

удалить значения прокладки. Тогда столбцы равны по высоте.

Удалить их из CSS:

padding-top: 3%; 
padding-bottom: 3%; 

padding-top: 4%; 
    padding-bottom: 4%; 

padding-top: 4%; 
    padding-bottom: 4%; 

здесь является fiddle