Question

我在Bootstrap中有一个图片库，如下所示：http://i.imgur.com/kaTu9TB.png

仅在第2行和某些屏幕尺寸（如992px到1200px）上，有一个空行，就像图像中的那一行一样。如果我删除，例如在检查员中，前两三个图像，一切都很好，但在代码中这样做并没有帮助。

这是我的代码：

<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
                    <a class="thumbnail fancybox" rel="ligthbox" href="../img/bunarske/bunarska-visoki-pritisak.jpg">
                        <img class="img-responsive" alt="" src="../img/bunarske/bunarska-visoki-pritisak.png" />
                        <div class="text-center">
                            <small class="text-muted">Bunarska pumpa visokog pritiska</small>
                        </div>
                    </a>
                </div>
                <div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
                    <a class="thumbnail fancybox" rel="ligthbox" href="../img/bunarske/demontaza-bunarske-pumpe.jpg">
                        <img class="img-responsive" alt="" src="../img/bunarske/demontaza-bunarske-pumpe.jpg" />
                        <div class="text-center">
                            <small class="text-muted">Demontaza bunarske pumpe</small>
                        </div>
                    </a>
                </div>
                <div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
                    <a class="thumbnail fancybox" rel="ligthbox" href="../img/bunarske/dubinske-pumpe-liveno-gvozdje.jpg">
                        <img class="img-responsive" alt="" src="../img/bunarske/dubinske-pumpe-liveno-gvozdje.png" />
                        <div class="text-center">
                            <small class="text-muted">Dubinske pumpe od livenog gvozdja</small>
                        </div>
                    </a>
                </div>
                <div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
                    <a class="thumbnail fancybox" rel="ligthbox" href="../img/bunarske/frekventna-regulacija.JPG">
                        <img class="img-responsive" alt="" src="../img/bunarske/frekventna-regulacija.JPG" />
                        <div class="text-center">
                            <small class="text-muted">Frekventna regulacija</small>
                        </div>
                    </a>
                </div>
                <div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
                    <a class="thumbnail fancybox" rel="ligthbox" href="../img/bunarske/komandno-upravljacki-orman.JPG">
                        <img class="img-responsive" alt="" src="../img/bunarske/komandno-upravljacki-orman.JPG" />
                        <div class="text-center">
                            <small class="text-muted">Komandno upravljacki orman</small>
                        </div>
                    </a>
                </div>
                <div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
                    <a class="thumbnail fancybox" rel="ligthbox" href="../img/bunarske/opremanje-arterijskog-bunara.jpg">
                        <img class="img-responsive" alt="" src="../img/bunarske/opremanje-arterijskog-bunara.png" />
                        <div class="text-center">
                            <small class="text-muted">Opremanje arterijskog bunara</small>
                        </div>
                    </a>
                </div>
                <div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
                    <a class="thumbnail fancybox" rel="ligthbox" href="../img/bunarske/postavljanje-bunarske-pumpe.jpg">
                        <img class="img-responsive" alt="" src="../img/bunarske/postavljanje-bunarske-pumpe.png" />
                        <div class="text-center">
                            <small class="text-muted">Postavljanje bunarske pumpe</small>
                        </div>
                    </a>
                </div>
                <div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
                    <a class="thumbnail fancybox" rel="ligthbox" href="../img/bunarske/pustanje-u-rad-bunarske-pumpe.jpg">
                        <img class="img-responsive" alt="" src="../img/bunarske/pustanje-u-rad-bunarske-pumpe.png" />
                        <div class="text-center">
                            <small class="text-muted">Pustanje u rad bunarske pumpe</small>
                        </div>
                    </a>
                </div>
                <div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
                    <a class="thumbnail fancybox" rel="ligthbox" href="../img/bunarske/vertikalna.JPG">
                        <img class="img-responsive" alt="" src="../img/bunarske/vertikalna.JPG" />
                        <div class="text-center">
                            <small class="text-muted">Vertikalna hidroforska posuda</small>
                        </div>
                    </a>
                </div>

所有东西都包裹在一个容器和一排内。我使用fancybox作为库，使用jQuery.matchHeight插件（https://github.com/liabru/jquery-match-height）来实现高度均匀。我把它初始化为：

$(".thumbnail").matchHeight();

我尝试过很多东西，包括设置clearfix，padding，添加行，调整图像大小等等。当然，它将变得非常微不足道，但我没有看到究竟是什么。其他部分中的所有其他图像显示正常。

Answer 1

像这样创建一个div .img-fixed { height: 190px; overflow: hidden; 固定高度div尝试这个https://jsfiddle.net/r3vn2t5v/

Answer 2

我通过连续显示3张图片解决了这个问题，这不仅看起来更好，而且还删除了出现的这个奇怪的空白区域。

Bootstrap图像库空白空间

2 个答案: