Bootstrap col与最高高度相同

Question

我在我的Bootstrap网站上有一堆.col-md-2。在每个这些内部，我都有一个图像，每个图像的高度都不相同。

我想让所有列的高度相同，所以我可以将图像放在“行”上。

这里的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; 
    } 
} 

我希望这会帮助你。