如何使用Bootstrap 3避免图像库中不同大小的图像之间出现空白

Question

目前我有这个画廊：

[http://jsfiddle.net/52VtD/8912/][1]

我想要的是：

[http://prntscr.com/53wz9q][2]

Answer 1

如果你正在使用bootstrap 3，我有一些经验要分享。

cdn

• 首先，如果你在本地下载，而不是使用cdn(从其他服务器加载的脚本)，你最好自定义/control 样式；

2.你的问题似乎覆盖了默认的bootstrap 3网格填充，边距；

这里有一个实时的bootstrap 3站点供参考。网址：http://glow-raspberry.com/

通过查看源代码，您可以使用下面的代码块来删除css覆盖后的默认边距和填充；

假设您已经创建了如下样式

<style>
    .margin-0 {  margin:0px;}
    .padding-0 {  padding:0px;}
</style>

应用于bootstrap html网格；

<div class="row margin-0">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padding-0">
    </div>
</div>

"col-lg-12 col-md-12 col-sm-12 col-xs-12“此行的值需要根据您的响应需求进行设置，根据您的演示案例url：http://prntscr.com/53wz9q，在所有分辨率下都应该设置为4作为3行网格(3*4=12)；

因此，通过这种方式，您可以使用响应式框架进行平衡，并应用您的自定义填充边距来删除空格；

截图：

​

Answer 2

我解决它的基础是

http://www.bootply.com/122476

结果是：

http://jsfiddle.net/L45dvek9/1/embedded/result/