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>

所以我假设因为我没有为第二列设置新的行标记，我没有得到Bootstrap的行默认-15px左右填充，并且我的行的总宽度太大。当我进入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像素，并将其下方的图像撞倒在一起。我正在试图弄清楚我的头发，当你弄清楚的时候，它似乎总是这样。

Bootstrap 3响应式缩略图在Chrome或Firefox中无法正确对齐

1 个答案: