css - 如何删除引导网格中列之间的空格？

Question

我想以网格样式呈现我的图像，就像 giphy 的样式一样，每一行都有很小的空间，并且所有内容都相互契合。

Giphy 网格样式

我将在我这边做同样的事情，但是在关闭列之间的空间时遇到了问题。

可以在这里找到我当前的网格样式外观：https ://i.imgur.com/gPnlxqy.jpg

我的代码是：

<div class="container">
<div class="row " style="height: 300px; margin-bottom:0px; margin-top: 0px; margin-right: 0px; margin-left: 0px; ">         



   <% for(var i=0; i<tags.length; i++) { %>

            <div class="col-md-6" class="" style="padding-right:0px;
    padding-left:0px; padding-top: 0px">
<!--p style="color: white; font-size: 30px"><%= caption[i] %> </p-->    

<a href="/meme/<%= pathi[i]%>"><img src='<%= path[i] %>' class="img-responsive" style="height: auto">  </a>

</div>  

</div>
</div>

<%}%> 

如何在 CSS/bootstrap 中完成这项工作？

Answer 1

   
@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        /* column-count: 4; */
    }
}

        
        .masonry {
        margin: 1.5em 0;
        padding: 0;
        -moz-column-gap: 1.5em;
        -webkit-column-gap: 1.5em;
        column-gap: 1.5em;
        font-size: .85em;
    }

    .item {
        display: inline-block;
        background: #fff;
        padding: 1.5em;
        margin: 0 0 1.5em;
        width: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.18);
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
    }

    <div class="masonry">
    		<div class="item"><img src="http://w3bits.com/wp-content/uploads/masonry.jpg"></div>
    		<div class="item">Text-only masonry block.</div>
    		<div class="item">
    			<img src="http://media-cache-ec0.pinimg.com/736x/c3/10/22/c3102281f88237e7a2515099d2e6651f.jpg">
    		</div>
    		<div class="item">
    			<img src="http://media-cache-ec0.pinimg.com/736x/0f/d0/84/0fd0847f7b48e5f16d896f62baa31b97.jpg">
    		</div>
    		<div class="item">
    			<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=+&amp;q=taj+mahal&amp;ie=UTF8&amp;hq=&amp;hnear=&amp;ll=27.175015,78.042155&amp;spn=0.006295,0.006295&amp;t=m&amp;output=embed"></iframe>
    		</div>
    		<div class="item">
    			<a href="https://twitter.com/w3bits_">I tweet sometimes.</a>
    		</div>
    		<div class="item">
    			<img src="http://media-cache-ak0.pinimg.com/736x/2e/7f/db/2e7fdb7ed765973407fed0b0141bb126.jpg">
    			<h2>A block with a headline using &lt;h2&gt; tag.</h2>
    		</div>
    		<div class="item">
    			<img src="http://media-cache-ec0.pinimg.com/600x/0b/87/f4/0b87f4eb50b3d7a7c9d70d97234753ab.jpg"><br>
    			Lorem ipsum dolor sit amet, dicta dolore adipisci hic ipsam velit deleniti possimus cumque accusantium rerum quibusdam.
    		</div>
    		<div class="item">
    			<img src="http://media-cache-ec0.pinimg.com/600x/95/11/02/951102f18d5a50c3ca483e93c6f92f5a.jpg">
    		</div>
    		<div class="item">
    			<iframe width="640" height="390" src="http://www.youtube.com/embed/cwGq-uy0bhI" frameborder="0" allowfullscreen=""></iframe>
    		</div>
    		<div class="item">
    			<a href="https://plus.google.com/+w3Bits">Circle me on Google+</a>
    		</div>
    		<div class="item">
    			<iframe src="http://player.vimeo.com/video/91605331" width="500" height="281" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
    		</div>
    		<div class="item">
    			<img src="http://media-cache-ec0.pinimg.com/600x/97/35/91/97359142dce582b4530cb0f23fbe2e43.jpg">
    		</div>
    		<div class="item">
    			<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/13403434&amp;auto_play=false&amp;hide_related=false&amp;visual=true"></iframe>
    		</div>
    		<div class="item">
    			<iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fw3bits&amp;width&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=463074340468076" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:290px;" allowtransparency="true"></iframe>
    		</div>
    	</div>