Bootstrap row-eq-height它不起作用

我正在用Bootstrap做網站，我需要樹列具有相同的高度，我試過不同的東西（http://brm.io/jquery-match-height/,http://www.bootply.com/GYU9zrCPdl），但似乎沒有任何工作我，現在我正在嘗試row-eq-height，但它也不起作用。繼承人的我的HTMLBootstrap row-eq-height它不起作用

  <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

來源

2016-05-12 user6009841

列（粉色）是高度相等。

.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％高大的我在這個Codepen Demo

加入這個column..so的

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

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

來源

2016-05-12 19:52:09

非常感謝它工作:) – user6009841

刪除填充值。然後這些列是相等的高度。

從CSS刪除這些：

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

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

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

這裏是fiddle

來源

2016-05-12 19:52:24 TechTho

Bootstrap row-eq-height它不起作用

回答

相關問題