html - 使用 twitter bootstrap 的缩略图未垂直对齐

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

我知道有点晚了，但不确定这是否有帮助 - 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>

谢谢，

Ember 。