响应式图片库 bootstrap 3答案

【问题标题】：Responsive images gallery bootstrap 3响应式图片库 bootstrap 3
【发布时间】：2014-12-08 13:21:11
【问题描述】：

几天后，我正在尝试制作一个包含大小略有不同但布局相同的图片的画廊。

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

我想要实现的是拥有一个具有相同最大宽度和相同最大高度的图像的画廊，当然，不会失真。 http://www.bootply.com/qsy3HNl8DK

非响应式布局示例：

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

【问题讨论】：

你的 jsfiddle 是空的

标签： css twitter-bootstrap twitter-bootstrap-3 image-gallery image-size

【解决方案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> 和每 4 个图像用于 xs（因为它是 2 的因数）和 md 和 lg <div class="clearfix visible-xs visible-md visible-lg"></div>。

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

【讨论】：

Clean for plane html 但我的画廊是动态生成的，这意味着 php 有点头疼。
很公平。如果你找到了更适合你的东西，那很好

【解决方案2】：

尝试使用一些 CSS 媒体查询来准确定位 xs 和 sm 视图。这些是引导程序使用的大小： - LG：> 1200像素 - md：> 992px - 小号：> 768 像素 - xs:

所以这段代码将完全针对 sm 和 xs：

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

【讨论】：

太棒了！这正是我所需要的。