Bootstrap 3 网格中断，响应图像高度不同

Question

我正在尝试制作一个包含响应式图像的简单网格。我的图像是电影封面，有些图像比其他图像低几个像素，这似乎正在破坏我的网格。

你可以在这里看到问题所在：http://jsfiddle.net/tbergeron/qzt8enaz/7/

这是一个简短的示例（请查看小提琴以真正查看错误）：

<div class="row">
     <h2>Hello world</h2>

    <div class="col-xs-4 col-sm-4 col-md-2 col-lg-2"> 
        <a href="#">
            <img src="..." class="img-full" />
        </a>
    </div>


    <div class="col-xs-4 col-sm-4 col-md-2 col-lg-2"> 
        <a href="#">
            <img src="..." class="img-full" />
        </a>
    </div>

    ...


</div>

我发现解决此问题的唯一可能方法是设置一个固定高度，但它再次破坏了元素的响应能力。

有什么想法吗？

我知道我应该添加一个容器等，但这无助于解决问题，我希望尽量减少示例代码。

Answer 1

因此，在我在 cmets 中提供的答案中，该技术的工作方式是您使用 nth-child 为 .clear 类提供一些 css 以提供 clearfix。关于 nth-child 的事情是它从字面上计算每个孩子，所以在你原来的小提琴中，你有一个 h2 元素作为行中的第一个子元素。遵循其余的 css 规则，没有应用媒体查询，因为在指定的第 n 个子位置从未找到 .clear 类。

解决方法如下：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css');
 .img-full {
  width: 100%;
}
@media (max-width: 991px) {
  .portfolio>.clear:nth-child(6n):before {
    content: '';
    display: table;
    clear: both;
  }
}
@media (min-width: 992px) {
  .portfolio>.clear:nth-child(12n):before {
    content: '';
    display: table;
    clear: both;
  }
}

<div class="container">
  <h2>Hello World!</h2>
  <div class="row portfolio">
    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/deathnote.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>

    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/hunterxhunter2011.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/30for30badboys.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/theartofflight.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/fullmetalalchemistbrotherhood.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/aliveinsideastoryofmusicmemory.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>

    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/magithelabyrinthofmagic.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/rushbeyondthelightedstage.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/30for30surviveandadvance.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/thebestofmen.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/houseofcards.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>

    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/youngjustice.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/marvelsagentsofshield.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/broadchurch.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/historyoftheeagles.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/aliveinsideastoryofmusicmemory.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>

    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/youngjustice.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/hunterxhunter2011.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/theartofflight.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


    <div class="col-xs-4 col-md-2">
      <a href="#">
        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/deathnote.jpg" class="img-full" />
      </a>
    </div>
    <div class="clear"></div>


  </div>
</div>

另外，为了稍微清理一下，我删除了不需要的 sm 和 lg 类。 Bootstrap 网格应用于到下一个网格类。例如，如果您应用 col-xs-4 和 col-lg-6，当您获得 2 列内容时，您将获得 3 列内容，直到 lg 断点（1200px）为止。

重申一下，上面的 css 中的第 n 个子元素计算了应用了投资组合类的元素的每个直接子元素，因此每个图像组和每个清晰的 div 都被计算在内。由于您已将 col-xs-4 应用于图像组，因此结果是每“行”有 3 个图像。因此，您希望在第 6 个子元素处清除所有断点，直到 md 断点。 col-md-2 类导致每个“行”有 6 个图像，因此在该断点及以上，您需要在投资组合的第 12 个子项处清除。有道理？

结果是你只需要两个媒体查询：一个用于max-width为991px（或sm断点的最大宽度），一个用于最小宽度为992px（或md断点的最小宽度） .