Bootstrap与最高的高度相同

Question

我的 Bootstrap 网站中有一堆.col-md-2。在每一个中，我有一个图像，每个都有不同的高度。

我想让所有列的高度相同，所以我可以将图像放在＆＃34;行＆＃34;。

这是HTML：

<div class="row">
    <div class="col-md-2">
        <img src="http://lorempixel.com/400/300/" alt="" />
    </div>
    <div class="col-md-2">
        <img src="http://lorempixel.com/400/200/" alt="" />
    </div>
    <div class="col-md-2">
        <img src="http://lorempixel.com/300/200/" alt="" />
    </div>
    <div class="col-md-2">
        <img src="http://lorempixel.com/200/200/" alt="" />
    </div>
    <div class="col-md-2">
        <img src="http://lorempixel.com/400/400/" alt="" />
    </div>
</div>

CSS：

.col-md-2 {
    background-color: red;
}

.col-md-2:nth-child(odd) {
    background-color: green;
}

.col-md-2 img {
    max-width: 100%;
}

工作JSFiddle

我该如何做到这一点？

Answer 1

您可以使用display: table-cell和table-layout: fixed

我在这里找到了一个很好的例子：http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

HTML

<div class="row">
  <div class="row-same-height">
    <div class="col-xs-6 col-xs-height"></div>
    <div class="col-xs-3 col-xs-height col-top"></div>
    <div class="col-xs-2 col-xs-height col-middle"></div>
    <div class="col-xs-1 col-xs-height col-bottom"></div>
  </div>
</div>

CSS

.row-full-height {
  height: 100%;
}
.col-full-height {
  height: 100%;
  vertical-align: middle;
}
.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
}
.col-xs-height {
  display: table-cell;
  float: none !important;
}

@media (min-width: 768px) {
  .col-sm-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 992px) {
  .col-md-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 1200px) {
  .col-lg-height {
    display: table-cell;
    float: none !important;
  }
}

我希望这会对你有所帮助。