javascript - 如何设置 Bootstrap 行

Question

我工作的网站是新闻通讯类型，在每一行之后，应该有一个小横幅，比方说谷歌广告。

每有一个新的断点，每个新闻行都会增加 1 项

小 img 来描述我想要实现的目标

如果我要使用这个标记

<div class="row">
  <div class="col-sm-4 col-md-3">
  <div class="col-sm-4 col-md-3">
  <div class="col-sm-4 col-md-3">
  <div class="col-sm-4 col-md-3">
</div>
<div class="row banner">
 ... img ...
</div>

sm 上会发生什么，第 4 个元素会折叠到新行，md 应该是 find

我希望此标记中的第 4 个元素位于横幅之后的新行(行)

附言对每种情况都使用 hidden-* 不是一种选择，因为行在超宽屏幕(1920 像素)上会有第 6 个元素。像这样xs - 2 元素sm - 3 元素md - 4 元素LG - 5 元素extra-lg - 6 项

当然还有多行和多个横幅，不应隐藏任何内容

编辑:

我想到了一些非常简单的方法，使用 jquery 粘贴新行。

                $(document).ready(function(){

                    function banner_layout(num, content){
                        return $(".news-grid .col-sm-6:nth-child("+ num +")").before( "<div class='col-xs-12 content-banner text-center'>" + content + "</div>");
                    };

                    function place_banner(position, content){
                        var p = position;

                        if (p == 1){
                            if ( $(window).innerWidth() > 320 && $(window).innerWidth() < 768) {
                                banner_layout(2, content);}
                            else if ( $(window).innerWidth() > 768 && $(window).innerWidth() < 992) {
                                banner_layout(3, content);}
                            else if ( $(window).innerWidth() > 992 && $(window).innerWidth() < 1200) {
                                banner_layout(4, content);}
                            else if ( $(window).innerWidth() > 1200 && $(window).innerWidth() < 1680) {
                                banner_layout(5, content);}
                            else if ( $(window).innerWidth() > 1680) {
                                banner_layout(6, content);}
                        }
                    };

                    place_banner(1, "<img src='http://placehold.it/1000x100' class='img-responsive' />");

                    $( window ).resize(function() {
                        $('.content-banner').remove();
                        place_banner(1, "<img src='http://placehold.it/1000x100' class='img-responsive' />");
                    });

                });

Answer 1

1) 通过 jQuery

脚本根据屏幕宽度将列从一行移动到另一行。

https://jsfiddle.net/glebkema/y07re3rq/

$(document).ready(function() {
  var selectAfter  = $( '#after'  );
  var selectBefore = $( '#before' );

  var numBefore = 6;
  checkBefore();
  $(window).resize( checkBefore );
  
  function checkBefore() {
    var widthNew = window.innerWidth;
    if      ( widthNew <  768 ) { setBefore(2) }
    else if ( widthNew <  992 ) { setBefore(3) }
    else if ( widthNew < 1200 ) { setBefore(4) }
    else                        { setBefore(6) };
  }

  function setBefore( numNew ) {
    while ( numBefore > numNew ) {
      selectBefore.children( 'div:last-child' ).prependTo( selectAfter );
      numBefore--;
    }
    while ( numBefore < numNew ) {
      selectAfter.children( 'div:first-child' ).appendTo( selectBefore );
      numBefore++;
    }
  }
});

/* Decorations */
.col-xs-6, .col-xs-12 { color: #fff; font-size: 48px; padding-bottom: 52px; padding-top: 14px; text-align: center; }
.col-xs-6:nth-child(2n+1) { background: #69c; }
.col-xs-6:nth-child(2n+2) { background: #9c6; }
.col-xs-12                { background: #c69; padding-bottom: 16px; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="row" id="before">
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">1</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">2</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">3</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">4</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">5</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">6</div>
  </div>
  <div class="row">
    <div class="col-xs-12">Banner</div>
  </div>
  <div class="row" id="after">
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">7</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">8</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">9</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">10</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">11</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">12</div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

2) CSS (仅适用于固定高度的列)

https://jsfiddle.net/glebkema/38w7L6jt/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

/* Heights */
.col-xs-12 { height: 120px;}
.col-xs-6  { height: 300px;}

/* Make free space for the banner */
                             .col-xs-6:nth-child(2) { margin-bottom: 120px; }
                             .col-xs-6:nth-child(3) { margin-bottom: 120px; }
@media (min-width:  768px) { .col-xs-6:nth-child(4) { margin-bottom: 120px; } }
@media (min-width:  992px) { .col-xs-6:nth-child(5) { margin-bottom: 120px; } }
@media (min-width: 1120px) { .col-xs-6:nth-child(6) { margin-bottom: 120px; } 
                             .col-xs-6:nth-child(7) { margin-bottom: 120px; } }

/* Move the banner down */
.row { position: relative; }
.col-xs-12 { height: 120px; position: absolute; left: 0; right: 0; top: 300px; }

/* Decorations */
.col-xs-6, .col-xs-12 { color: #fff; font-size: 48px; padding-top: 14px; text-align: center; }
.col-xs-6:nth-child(2n+1) { background: #69c; }
.col-xs-6:nth-child(2n+2) { background: #9c6; }
.col-xs-12                { background: #c69; }

<div class="container">
  <div class="row">
    <div class="col-xs-12">Banner</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">1</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">2</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">3</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">4</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">5</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">6</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">7</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">8</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">9</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">10</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">11</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">12</div>
  </div>
</div>