如何删除Thumbnails Bootstrap的边距

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插件才能获得这种外观。