Question

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

<section class="container">
  <div class="row thumbs">
    <div class="col-sm-3">content</div>
    <div class="col-sm-3">content</div>
    <div class="col-sm-3">content</div>
    <div class="col-sm-3">content</div>
    <div class="col-sm-3">content</div>
  </div>
  <hr class="divider" />
  <div class="navigation">navigation</div>
</section

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

<section class="container">
  <div class="row thumbs">
    <div class="col-sm-3">content</div>
    <div class="col-sm-3">content</div>
    <div class="col-sm-3">content</div>
    <div class="col-sm-3">content</div>
  </div>
  <hr class="divider" />
  <div class="row">
    <div class="col-sm-3">content</div>
  </div>
  <hr class="divider" />
  <div class="navigation">navigation</div>
</section>

有没有办法用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 = $('<div class="row">').append($items.slice(i, i + 4));
        $parent.append('<hr class="divider">').append($row);    
    }
}

的 DEMO

Answer 2

这对我来说效果最好：

var $d = $('.thumbs');
var $p = $('.col-sm-3:gt(3)', $d);
if ($p.length) {
    $('<div class="row thumbs">').insertAfter($d).append($p);
    $('<hr class="divider">').insertAfter($d);
}

Answer 3

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

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

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

jsFiddle中的演示＆amp; 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;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>

<section class="container">
    <div class="row thumbs">
        <div class="col-sm-3">content</div>
        <div class="col-sm-3">content</div>
        <div class="col-sm-3">content</div>
        <div class="col-sm-3">content</div>
        <div class="col-sm-3">content</div>
        <div class="col-sm-3">content</div>
        <div class="col-sm-3">content</div>
        <div class="col-sm-3">content</div>
        <div class="col-sm-3">content</div>
    </div>
    <div class="navigation">navigation</div>
</section>

另外，请记住，这不是本地supported in < IE8

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

3 个答案:

jsFiddle中的演示＆amp; Stack Snippets