响应图像库引导3

Question

几天后，我正在尝试制作一个图片库，其大小略有不同，但布局相同。

由于我可以通过强制容器div的400 image宽度来使其在md视图中工作，因此解决方案将在xs和sm视图中的每个图像下面创建一个空白。

我想要的是有一个图片的最大宽度和相同的最大高度，当然，当然，不扭曲的画廊。http://www.bootply.com/qsy3HNl8DK

无响应布局示例：

http://jsfiddle.net/npek7uxh/

<div class="container">
    <img class="img-responsive" src="http://placehold.it/400x610" />
</div>

Answer 1

尝试使用一些CSS媒体查询来精确地针对xs和sm视图。这些是引导程序使用的大小：- lg：>1200 xs md：>992px - sm：>768 xs xs：<768 xs。

因此，这段代码将精确地针对sm和xs：

@media (max-width: 992px) {
 img {
  margin-bottom:0;
 }
}

Answer 2

html有点复杂，但是您可以在没有任何自定义CSS的情况下做到这一点。简而言之，您可以将clearfix与visble-xs/sm/md/lg结合起来，插入一个清除方法，以重置正确位置的行，但只在特定设备上可见。

也就是说，在xs <div class="clearfix visible-xs"></div>上每2幅图像之后插入它，每3幅图像仅插入sm <div class="clearfix visible-sm"></div>，每4幅图像插入xs (因为它是2的因子)以及md和lg <div class="clearfix visible-xs visible-md visible-lg"></div>。

示例：http://www.bootply.com/6BkXDk68Cu