Bootstrap3 中的 nth-child 未正确对齐

Question

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

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

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

Answer 1

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

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

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