关闭一个bootstrap行并在每个包含div的第n个后面开始新行

我有一个引导行，它将填充，比方说，博客文章缩略图。

 
 
content
 
content
 
content
 
content
 
content
 
 
 
navigation
 </section 

我想关闭一行，插入hr标签并在每个第4个后缩略图后打开一个新的引导行。

 
 
 
content
 
content
 
content
 
content
 
 
 
 
content
 
 
 
navigation
  

有没有办法用jquery做到这一点？

Answer 1

可以做这样的事情：

 var $mainElem = $('.row'),/* adjust selector to suit page*/ $parent = $mainElem.parent(), /* remove children after 4th from existing row */ $items = $mainElem.children(':gt(3)').detach(); if ($items.length) { /* create new row for every 4 items removed above */ for (var i = 0; i < $items.length; i = i + 4) { var $row = $('
').append($items.slice(i, i + 4)); $parent.append('
').append($row); } } 

DEMO

Answer 2

这对我来说效果最好：

 var $d = $('.thumbs'); var $p = $('.col-sm-3:gt(3)', $d); if ($p.length) { $('
').insertAfter($d).append($p); $('
').insertAfter($d); } 

Answer 3

根据您在新行中包装每组列的动机，您可以使用直接CSS为每个第n行设置样式。

在bootstrap中，如果你有额外的列溢出超过12，它们只是换行到新行，所以拥有新行通常是多余的，尽管你可能有一些外部的理由让它保持在你的情况下。

无论哪种方式，这里是一个CSS解决方案，每4个div添加一个页宽水平分隔符：

在jsFiddle和Stack Snippets中演示

 .container .row.thumbs div:nth-child(4n) { position: static; } .container .row.thumbs div:nth-child(4n):after { content: ' '; border-top: 1px solid black; display: block; position: absolute; width: 95%; margin-left: 2.5%; left: 0; } 

  
 
 
content
 
content
 
content
 
content
 
content
 
content
 
content
 
content
 
content
 
 
navigation