如何在bootstrap中为响应式设计提供clearfix？

Question

当添加额外内容时，网格变得难看，所以我在jquery中的每个第3个孩子之后给了clearfix

<script type="text/javascript">
    $("#clearallcat > div:nth-child(3n)").after("<div class='clearfix visible-lg-block visible-md-block'></div>");
    </script>

以便在每个第3个标记之后正确使用clearfix，它适合中型和大型桌面

http://s9.postimg.org/xhw81689b/clearfix_doubt.png

但是，当我试图添加平板电脑大小，脚本无法正常工作..我在这里试过

<script type="text/javascript">
    $("#clearallcat > div:nth-child(3n)").after("<div class='clearfix visible-lg-block visible-md-block'></div>");
    $("#clearallcat > div:nth-child(2n)").after("<div class='clearfix visible-sm-block'></div>");
    </script>

这是平板电脑视图中的图片

我应该在jquery中更改什么才能重新修复平板电脑？

Answer 1

假设您的每个块都有一个 .board-item 类，然后为不同的视口写一些这样的css：

@media (min-width:768px) and (max-width:991px) {
    .board-item:nth-child(2n+1) {
    clear:left //every 3rd element falls in new row
    }
}
@media (min-width:992px) and (max-width:1200px) {
  .board-item:nth-child(3n+1) {
   clear:left //every 4th element falls in new row
  }
}
@media (min-width:1200px) {
  .board-item:nth-child(4n+1) {
   clear:left //every 5th element falls in new row
  } 
}