css - Bootstrap3 中的第 n 个 child 没有正确对齐

Question

我似乎永远无法让它工作，我有一个简单的 Bootstrap 页面，其中包含一个包含不同高度图像的图库。我正在尝试使用 nth-child 在每四个 .col-md-3 之后清除左侧

Bootply smippet - http://www.bootply.com/7BhYr6J8rH

完成页面的内容将从数据库中动态填充，因此我需要这种灵 active 才能工作。谁能指出我哪里出错了？

Answer 1

很难解释，但您在图像上使用了第 nth-child。因为没有图像列表，所以它永远不会到达第 4 个图像，每列只有 1 个图像，仅此而已。但是，一行确实包含列列表，因此我编辑了您的代码以按列清除，如下所示 http://www.bootply.com/7BhYr6J8rH :

.row .col-md-3:nth-child(5n) {
   clear:left;
}

另一个想法，你可以做的是添加 <div class="clearfix"></div>在每第四列之后获得相同的结果和更清晰的代码。