jquery - 如何删除缩略图 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 这样的 JS 插件或 Isotope获得那种外观。