Bootstrap 3响应缩略图在Chrome或Firefox中不能正确对齐

Question

我在Bootstrap 3中构建了一个缩略图网格，在大列和中列中，它们在3列中对齐，在小网格和xsmall网格2中对齐。在Safari中，缩略图、列和行在所有网格系统中都可以很好地工作。在Chrome和Firefox中，在大列和中列网格中，第二行的缩略图被推倒，因此第一行是“空白”的，缩略图从第二(中间)行开始。small和xsmall列的工作方式与预期一致。代码如下：

<section class="container gallery">
 <div class="row">
  <div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-xs-12">
    <div class="row">

      <div class="col-lg-4 col-md-4  col-sm-4 col-xs-6">
          <a href="#"><img class="img-responsive img-thumbnail" src="1-tn.jpg" alt=""></a>
      </div>

      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
        <a href="#"><img class="img-responsive img-thumbnail" src="2-tn.jpg" alt=""></a>
      </div>

      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
        <a href="#"><img class="img-responsive img-thumbnail" src="3-tn.jpg" alt=""></a>
      </div>

      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
        <a href="#"><img class="img-responsive img-thumbnail" src="4-tn.jpg" alt=""></a>
      </div>

      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
        <a href="#"><img class="img-responsive img-thumbnail" src="5-tn.jpg" alt=""></a>
      </div>

      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
        <a href="#"><img class="img-responsive img-thumbnail" src="6-tn.jpg" alt=""></a>
      </div>

      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
        <a href="#"><img class="img-responsive img-thumbnail" src="7-tn.jpg" alt=""></a>
      </div>

    </div>
  </div>
</div>
</section> 

当我进入Chrome的开发者工具并关闭col lg-10的左或右填充时，缩略图正确地对齐，证实了我的预感。然而，我不想显式地设置行，因为一行中的缩略图的数量将根据调用的网格大小而变化。我可以为每种尺寸的画廊设置媒体查询，但这似乎很笨拙。我确实尝试添加了一个css规则body#home .gallery .col-lg-10, body#home .gallery .col-md-10，它适用于大列，但不适用于中列。我的img标签设置为height: auto；max-height: 100%；。有人有什么解决方案吗？

Answer 1

我自己想出来的。我以为我所有的图片都是一样的大小，但是左上角的图片高了1个像素，把下面的图片弄乱了。我绞尽脑汁试图弄清楚，当你弄明白的时候，似乎总是这样的。