使用Twitter Bootstrap的缩略图未垂直对齐

Question

Here's my sample output:

Here's my html code on it:

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

And here's my css code:

    .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;
}

I noticed it is already horizontally aligned, my problem is to align it vertically. What should I do? Please help thanks!

Answer 1

I know its a little late but not sure if this helps - 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>

Thanks,

Ash.

Answer 2

Wrap it with a row or container.

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

There are two ways to make this better that I've found: manually setting the element height / keeping the element heights consistent, OR the following CSS:

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

Wrapping this in a container won't fix the problem; it'll just constrain it to a smaller space.

Similar issues:

vertically aligning thumbnails in bootstrap css?

Aligning thumbnails along columns using twitter-bootstrap

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