引导图库空白

我在引导有一个图片库，看起来像这样：http://i.imgur.com/kaTu9TB.png 引导图库空白

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

这里是我的代码为这个画廊：

<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，填充，添加行，调整图像大小和whatnot。当然它会变成非常微不足道的东西，但我没有看到究竟是什么。其他部分的所有其他图像显示正常。

来源

2017-04-21 wickedchild

fixed div'height'and –

and？ :)我不认为这是一个完整的答案。 – wickedchild

您可以创建一个工作示例请 –

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

来源

2017-04-21 10:39:25

这并没有解决问题，我已经说过我使用jQuery.matchHeight插件，所以不需要设置高度。 – wickedchild

你有使用相同的IMG和相同的文字我这个人工作？ –

我已经在一排，它不仅看起来更好显示3张图像解决了问题，但消除这种怪异的空白空间出现了。

来源

2017-04-21 14:06:45 wickedchild

引导图库空白

回答

相关问题