css - Bootstrap - 画像ギャラリーにフック

Question

だから私はこのサイト ( http://cee.cgreen.ca/index.php?page=designs ) (これはプロトタイプです) で作業してきましたが、ブートストラップは常に不安定なようです。製品を独自の列などに引っ掛けるフックが常にあります。私はそれを理解できないようです。;-;

    // HTML
<div id="products">
    <div class="span4"> //twitter span
    <div class="product-grid"> //contained image
    <div class="product-grid-item">
    <div class="product-link" title="Pin this!">

    <img src="images/designs/shirt.png" class="product-photo">

    <div class="over-wrapper" style="opacity: 0; display: block;"></div>
    <div class="over-content" style="opacity: 0; display: block;"><br><br><br>

    <a href="link" data-pin-do="buttonPin" data-pin-config="none" target="_blank">
    <img src="images/pinthis.png" style="margin:auto;"></a> 

    </div></div></div></div></div>

/** CSS **/
#products {
    text-align: center;
    color: #999999;
    text-decoration: none;
    font: 12px "proxima-nova";
    margin-left:auto;
    margin-right:auto;
    max-width:100%;
}

.product-grid{
  color: #666666;
  margin:10px;
}

.generated-height .product-grid-item {
  width: 177px;
  position: absolute;

  bottom: 0;

  }

.product-grid img{
  display: block;
  margin: 0 auto;
  }

.product-grid a{
  text-decoration: none;
  display: block;
  color: #333333;

  }

.product-grid .product-link{
  display: block;
  position: relative;
  z-index: 1;
  text-decoration: none;
  margin: 0;
  min-height: 50px;
  /* for ie6: */
  width: 100%;
  }

.product-grid .product-link .over{

    position: Absolute;    
    top: 0;
    left: 0;
    display: none;
}

.product-photo{
  max-width: 100%;
}
.ie6 .product-grid{ overflow: hidden; }

.span4 {
  width: 300px;
}

.row-fluid .span4 {
  width: 31.91489%;
  *width: 31.8617%;
}