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

答

列（粉色）是高度相等。

.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; 
}

非常感谢它工作:) – user6009841

答

删除填充值。然后这些列是相等的高度。

从CSS删除这些：

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

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

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

这里是fiddle

Bootstrap row-eq-height它不起作用

相关推荐