트위터 부트 스트랩을 사용하는 올바른 방법 미리보기 이미지

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를 추가했습니다. 당신이 방화범 보면