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

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

以下是修复：

＆＃13;

＆＃13;

@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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

重申一下，上面css中的nth-child计算应用了投资组合类的元素的每个直接子元素，因此计算每个图像组和每个clear div。由于您已将col-xs-4应用于图像组，因此每行＆＃39;结果为3张图像。因此，您希望第6个子元素清除所有断点，直到md断点。 col-md-2类每行＆＃39;产生6个图像，因此在该断点及以上，您需要清除投资组合的第12个子项。合理？

结果是您只需要两个媒体查询：一个用于最大宽度991px（或sm断点的最大宽度），另一个用于最小宽度992px（或md断点的最小宽度） 。