css - 响应式图片库 bootstrap 3

Question

几天前，我正在尝试用尺寸略有不同但布局相同的图片制作画廊。

因为我可以通过强制容器 div 的最大宽度为 400px 使其在 md View 中工作，解决方法会在 xs 和 sm View 中的每个图像下方创建一个间隙。

我想要实现的是拥有一个包含相同最大宽度和相同最大高度的图像的画廊，当然，没有扭曲。 http://www.bootply.com/qsy3HNl8DK

非响应式布局示例:

http://jsfiddle.net/npek7uxh/

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

Answer 1

html 有点复杂，但您可以在没有任何自定义 CSS 的情况下完成此操作。简而言之，你结合clearfix与 visble-xs/sm/md/lg插入 clearfix 以在正确位置重置行，但仅在特定设备上可见。

即你在 xs <div class="clearfix visible-xs"></div> 上每 2 张图像后插入它每 3 张图片仅适用于 sm <div class="clearfix visible-sm"></div>以及 xs(因为它是 2 的因数)和 md 和 lg <div class="clearfix visible-xs visible-md visible-lg"></div> 的每 4 张图片.

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