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>

谢谢，

灰。

Answer 2

我发现有两种方法可以使它变得更好：手动设置元素高度/保持元素高度一致，或者使用以下 CSS：

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

将其包装在容器中不会解决问题；它只会将其限制在较小的空间内。

类似问题：

在引导 css 中垂直对齐缩略图？

使用 twitter-bootstrap 沿列对齐缩略图

twitter bootstrap 缩略图在 Chrome + Windows XP 之外的任何地方都无法正确对齐

Answer 3

用行或容器包裹它。

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