썸네일의 여백 제거 방법 부트 스트랩

Question

썸네일의 여백을 제거하려고 시도했지만 어쩔 수 없습니다. 나는 내가 뭘 잘못하고 있는지 몰라.

내 코드는 다음과 같습니다

 <div class="col-lg-4"> 
     <div id="thumbs"> 
      <div class="thumbnail"> 
      <span class="badge badge-padding-bottom">$50.000</span> 
      <span class="badge badge-padding-bottom pull-right">$50.000</span> 
       <a class="efecto" rel="gallery1" href="img/slide-1.jpg"> 
        <img src="img/slide-1.jpg" class="img-responsive"> 
       </a> 
       <div class="caption"> 
       <h3>Thumbnail label</h3> 
       <p>Texto</p> 
       <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> 
       </div> 
      </div> 
     </div> 
    </div> 

     <div class="col-lg-4 "> 
     <div id="thumbs"> 
      <div class="thumbnail"> 
      <span class="badge badge-padding-bottom">$50.000</span> 
       <a class="efecto" rel="gallery1" href="img/slide-2.jpg"> 
        <img src="img/slide-2.jpg" class="img-responsive"> 
       </a> 
       <div class="caption"> 
       <h3>Thumbnail label</h3> 
       <p>Texto</p> 
       <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> 
       </div> 
      </div> 
     </div> 
     </div> 

     <div class="col-lg-4"> 
     <div id="thumbs"> 
      <div class="thumbnail"> 
      <span class="badge badge-padding-bottom">$50.000</span> 
       <a class="efecto" rel="gallery1" href="img/slide-3.jpg"> 
        <img src="img/slide-3.jpg" class="img-responsive"> 
       </a> 
       <div class="caption"> 
       <h3>Thumbnail label <span class="label label-danger">Sin Stock</span> </h3> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni illum incidunt dolores, sit ab accusantium tempore nihil repudiandae illo fugiat distinctio possimus earum rem in libero fugit, ut mollitia iusto.</p> 
       <p> 
        <a href="#" class="btn btn-primary" role="button">Button</a> 
        <a href="#" class="btn btn-default" role="button"><span class="glyphicon glyphicon glyphicon-plus"></span>Button</a> 
       </p> 
       </div> 
      </div> 
     </div> 
     </div> 

     <div id="thumbs"> 
     <div class="col-lg-4"> 
      <div class="thumbnail"> 
      <span class="badge badge-padding-bottom">$50.000</span> 
       <a class="efecto" rel="gallery1" href="img/slide-2.jpg"> 
        <img src="img/slide-2.jpg" class="img-responsive"> 
       </a> 
       <div class="caption"> 
       <h3>Thumbnail label <span class="label label-success"></span> </h3> 
       <p>Texto</p> 
       <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> 
       </div> 
      </div> 
     </div> 
     </div> 

     <div class="col-lg-4"> 
     <div id="thumbs"> 
       <div class="thumbnail"> 
       <span class="badge badge-padding-bottom">$50.000</span> 
        <a class="efecto" rel="gallery1" href="img/slide-1.jpg"> 
         <img src="img/slide-1.jpg" class="img-responsive"> 
        </a> 
        <div class="caption"> 
         <h3>Thumbnail label <span class="label label-info"></span> </h3> 
         <p>Texto</p> 
         <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> 
        </div> 
       </div> 
      </div> 

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

보이 : http://i.imgur.com/bPf5u4q.png)

나는 이런 식으로 뭔가 싶어 : http://i.imgur.com/8nSiKXl.png

누군가 내가 나를 도울 수 있습니까?

Answer 1

모양을 보려면 Masonry 또는 Isotope과 같은 JS 플러그인을 사용해야합니다.