縮略圖自舉不垂直對齊

Question

這裏是我的示例輸出：

這裏是我的html代碼就可以了：

<div class="products"> 
<ul class="thumbnails">' 
    <li> 
     <div>'.$item->ASIN.'</div> 
     <div><img src="'.$item->SmallImage->URL.'" alt=""></div> 
     <div>'.$item->ItemAttributes->Title.'</div> 
     <div>'.$item->ItemAttributes->ProductGroup.'</div> 
    </li> 
</ul> 

這是我的css代碼：

.thumbnails { 
    text-align: center; 
} 
.thumbnails li { 
    width: 150px; 
    height: 250px; 
    background: red; 
    float: none !important; /* to overwrite the default property on the bootstrap stylesheet */ 
    display: inline-block; 
    *display: inline; /* ie7 support */ 
    zoom: 1; 
} 

我注意到它已經水平對齊了，我的問題是垂直對齊它。我該怎麼辦？請幫忙謝謝！

Answer 1

用行或容器包裝它。

<div class="products"> 
    <div class="container"> 
    <ul class="thumbnails">' 
     <li> 
     <div>'.$item->ASIN.'</div> 
     <div><img src="'.$item->SmallImage->URL.'" alt=""></div> 
     <div>'.$item->ItemAttributes->Title.'</div> 
     <div>'.$item->ItemAttributes->ProductGroup.'</div> 
     </li> 
    </ul> 
    </div> 
</div> 

Answer 2

有兩種方式，使這個更好的，我已經發現：手動設置元素的高度/保持高度元素保持一致，或下面的CSS：

.thumbnails > li { 
    float: left; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    } 
    .thumbnails > li:nth-child(3n+4) { 
    clear: both; 
    } 

包裝這在容器不會解決問題;它只會將它限制在一個更小的空間。

類似的問題：

vertically aligning thumbnails in bootstrap css?

Aligning thumbnails along columns using twitter-bootstrap

twitter bootstrap thumbnails not aligning properly anywhere but Chrome + Windows XP

Answer 3

我知道它有點晚了，但不知道這是否有助於 - http://getbootstrap.com/css/#grid-responsive-resets

<div class="row"> 
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> 
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> 

    <!-- Add the extra clearfix for only the required viewport --> 
    <div class="clearfix visible-xs"></div> 

    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> 
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> 
</div> 

比ks，

灰。