0

我在 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; 最大高度：100%；。任何人有任何解决方案？

4

1 回答 1

3

我自己想通了。我认为我所有的图像大小都相同，但左上角的图像高 1 个像素，并且将其下方的图像打乱了。我一直在扯我的头发试图弄清楚它，当你弄清楚它时，它似乎总是这样。

于 2013-11-09T19:04:16.613 回答