网站我正在进行的工作是通讯类型，在每行之后，应该有一个小横幅，让我们说谷歌广告。如何设置自举行

随着每一个新的断点，每个新闻行将通过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是第四个元素会崩溃到新行和MD应该是找到

我想第四元素在此标记的旗帜

后附言要对新线（行）对每种情况使用hidden- *不是一种选择，因为行在超宽屏幕（1920px）上会有第6个项目。像这样 XS - 2项 SM - 3项 MD - 4项 LG - 5项额外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' />"); }); });

来源

2016-08-12 Sergey Khmelevskoy

你想从字面上重新排序DOM。如果你想这样做，我认为你被JavaScript卡住了。 Flexbox可能可以实现这一点，但我也怀疑这一点，但我不太了解Flexbox。你不能把你想要的元素放在另一个屏幕上。 – Leeish

还有另一个窍门，如果你正在寻找简单的东西，隐藏div并在解决方案更改期间显示另一个div –

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>

来源

2016-08-13 02:47:00

我真的很喜欢你的问题但不幸的是，现在我没有空闲时间来解决这个问题，但一个可以带来你有关决议的几个见解。

首先，您可能需要一些MVW框架来解决这个问题，因为根据您的DOM的货币，您应该重新组织您的HTML元素，主要是。

我已经开始了一个plunker文件，你可以尝试阐明这个（或者我们的stackoverflow的朋友）。继承人是以下网址Plunker

<!DOCTYPE html> 
<html lang="en" ng-app="TestApp"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>Angular Test</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.10/angular-animate.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body ng-controller="PhoneListCtrl"> 
    <div class="content"> 
    <div class="row"> 
     <div class="col-sm-4 col-md-3 col-lg-2 col-xs-6" style="background:red;">sadasdsadasdasdsadasdsadas</div> 
     <div class="col-sm-4 col-md-3 col-lg-2 col-xs-6" style="background:blue;">sadasdsa</div> 
     <div class="col-sm-4 col-md-3 col-lg-2 col-xs-6" style="background:green;">asdsadsadsa</div> 
     <div class="col-sm-4 col-md-3 col-lg-2 col-xs-6" style="background:purple;">asdasdsadas</div> 
    </div> 
    <div class="row banner" style="background:pink;"> 
    IMAGE BANNER 
    </div> 

    </div> 


    <div ng-repeat="n in [10] | makeRange">Do something 0..9: {{n}}</div> 

    </body> 

</html>}

的script.js

'use strict'; 

var myapp = angular.module('TestApp', []); 

myApp.filter('makeRange', function() { 
     return function(input) { 
      var lowBound, highBound; 
      switch (input.length) { 
      case 1: 
       lowBound = 0; 
       highBound = parseInt(input[0]) - 1; 
       break; 
      case 2: 
       lowBound = parseInt(input[0]); 
       highBound = parseInt(input[1]); 
       break; 
      default: 
       return input; 
      } 
      var result = []; 
      for (var i = lowBound; i <= highBound; i++) 
       result.push(i); 
      return result; 
     }; 
    });

的主要概念是，你应该使用NG-重复根据分辨率分离ocurrencies。

这是一个很好的代码片段，可以帮助您找到筛选元素的屏幕。

if(findBootstrapEnvironment()==="Medium"|(findBootstrapEnvironment()==="Large"|){ 
$scope.size="Medium" 
}else{ 
$scope.size="Small" 
} 

function findBootstrapEnvironment() { 
var envs = ["ExtraSmall", "Small", "Medium", "Large"]; 
var envValues = ["xs", "sm", "md", "lg"]; 

var $el = $('<div>'); 
$el.appendTo($('body')); 

for (var i = envValues.length - 1; i >= 0; i--) { 
    var envVal = envValues[i]; 

    $el.addClass('hidden-'+envVal); 
    if ($el.is(':hidden')) { 
     $el.remove(); 
     return envs[i] 
    } 
};

当我回来，如果你还没有得到你的问题回答，我会帮你！

来源

2016-08-12 23:33:19

如何设置自举行

回答

1）的jQuery

2）通过CSS（仅用于固定高度的列）

相关问题