Html Bootstrap row-eq-height 它不起作用

Bootstrap row-eq-height it's not working

提问by user6009841

I'm using Bootstrap. I need three columns to have the same height. I tried different things (Link 1, Link 2) but they don't work. row-eq-heightdoesn't work either.

我正在使用引导程序。我需要三列具有相同的高度。我尝试了不同的东西（链接 1，链接 2）但它们不起作用。row-eq-height也不起作用。

HTML

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

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

采纳答案by Paulie_D

The columns (in pink) areequal height.

列（粉红色）的高度相等。

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

If you want the background of the header element to extend all the way down, you need to make them 100% tall of the column..so I added this in this Codepen Demo

如果您希望标题元素的背景一直向下延伸，则需要使它们占列的 100% 高..所以我在此Codepen Demo 中添加了它

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

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

回答by TechTho

remove the padding values. Then the columns are equal height.

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

Remove these from the css:

从 css 中删除这些：

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

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

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

here is the fiddle

这是小提琴