Question

我希望以网格样式呈现我的图像，就像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>

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

1 个答案: