正确使用Twitter Bootstrap缩略图的方法

Question

我在my website的页面底部使用以下标记。这是使用Twitter Bootstrap Thumbnails。

这是正确的设置方法吗？如果是，为什么缩略图没有正确堆叠？ （注意第一行之后出现的差距）。我试图避免连续包装每4件产品。

感谢您的帮助。

      <div class="row">
        <div class="col-sm-6 col-md-3 mix category-weight-management">
          <div class="thumbnail">
            <a href=""><img src="/assets/img/sample-products/PSPrenatal.jpg" alt="..."></a>
            <div class="outer-caption">
                <div class="caption">
                  <a href=""><h3>PS Prenatal</h3></a>
                  <p>Superior Multivitamins for Mom & Baby</p>  
                </div>  
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-3 mix category-weight-management">
          <div class="thumbnail">
            <a href=""><img src="/assets/img/sample-products/PSSleepAid.jpg" alt="..."></a>
            <div class="outer-caption">                
              <div class="caption">
                <a href=""><h3>PS Sleep Aid</h3></a>
                <p>Restful Sleep Formula</p>  
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-3 mix category-multivitamin">
          <div class="thumbnail">
            <a href=""><img src="/assets/img/sample-products/PSPerformance.jpg" alt="..."></a>
            <div class="outer-caption">
              <div class="caption">
                <a href=""><h3>PS Performance</h3></a>
                <p>All Natural Male Performance Formula</p>  
              </div>  
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-3 mix category-multivitamin">
          <div class="thumbnail">
            <a href=""><img src="/assets/img/sample-products/VitaminD3_2000_big.jpg" alt="..."></a>
            <div class="outer-caption">
              <div class="caption">
                <a href=""><h3>PS Vitamin D3 2000 IU</h3></a>
                <p>Supplement Facts</p>  
              </div>  
            </div>
          </div>
        </div>  
        <div class="col-sm-6 col-md-3 mix category-weight-management">
          <div class="thumbnail">
            <a href=""><img src="/assets/img/sample-products/PSPrenatal.jpg" alt="..."></a>
            <div class="outer-caption">
                <div class="caption">
                  <a href=""><h3>PS Prenatal</h3></a>
                  <p>Superior Multivitamins for Mom & Baby</p>  
                </div>  
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-3 mix category-weight-management">
          <div class="thumbnail">
            <a href=""><img src="/assets/img/sample-products/PSSleepAid.jpg" alt="..."></a>
            <div class="outer-caption">                
              <div class="caption">
                <a href=""><h3>PS Sleep Aid</h3></a>
                <p>Restful Sleep Formula</p>  
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-3 mix category-multivitamin">
          <div class="thumbnail">
            <a href=""><img src="/assets/img/sample-products/PSPerformance.jpg" alt="..."></a>
            <div class="outer-caption">
              <div class="caption">
                <a href=""><h3>PS Performance</h3></a>
                <p>All Natural Male Performance Formula</p>  
              </div>  
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-3 mix category-multivitamin">
          <div class="thumbnail">
            <a href=""><img src="/assets/img/sample-products/VitaminD3_2000_big.jpg" alt="..."></a>
            <div class="outer-caption">
              <div class="caption">
                <a href=""><h3>PS Vitamin D3 2000 IU</h3></a>
                <p>Supplement Facts</p>  
              </div>  
            </div>
          </div>
        </div>
      </div><!-- /.row -->

Answer 1

这是因为缩略图使用display: inline-block，您的第一个元素高于另一个元素。在这些缩略图上设置高度（或使用统一的图片）以避免间隙：

.product-categories .thumbnail {
    position: relative;
    height: 430px;
}
.product-categories .thumbnail .outer-caption {
    position: absolute;
    bottom: 0;
    width: 100%;   
}

我添加了一些CSS来对齐字幕。