Выделить все divs в первой строке в динамической сетке

Question

Я использую сетку с 12 столбцами. Я хочу дать каждому div margin-top: 20px, кроме div в первой строке. Но мне трудно узнать, какие divs находятся в первой строке, потому что это не определено. Первая строка может содержать от 1 до 12 div.

Я использую sass и попробовал следующее решение, но это работает только с div с одинаковой шириной. Первый пример не работает, потому что второй div не получает поля.

// max. 12 rows. 
@for $colWidth from 1 through 12 {   
    // example: 3 divs in a row (colWidth = 4), 12/4+1 = 4. 
    // Set margin from the fourth element to the last element. 
    $number: (12/$colWidth) + 1; 

    // set margin only for banner-component 
    div.col-xs-#{$colWidth}:nth-child(n+#{$number}) section.banner-component { 
     margin-top: 20px; 
    } 
    div.col-sm-#{$colWidth}:nth-child(n+#{$number}) section.banner-component { 
     margin-top: 20px; 
    } 
} 

Селекторы Ohter css также не работают. первый ребенок, n-й ребенок. Любая идея, как я могу выбрать divs в первой строке?

Вот некоторые примеры:

Пример 1: Первая строка содержит 1 Div (Col-LG-12)

<div> class="col-xs-12 col-lg-12"> 
    <section class="banner-component"></section> 
</div> 
<div> class="col-xs-6 col-lg-6"> 
    <section class="banner-component"></section> 
</div> 
<div> class="col-xs-6 col-lg-6"> 
    <section class="banner-component"></section> 
</div> 
<div> class="col-xs-6 col-lg-6"> 
    <section class="banner-component"></section> 
</div> 

Пример 2: Первая строка содержит 2 дивы (Col-LG-6)

<div> class="col-xs-6 col-lg-6"> 
    <section class="banner-component"></section> 
</div> 
<div> class="col-xs-6 col-lg-6"> 
    <section class="banner-component"></section> 
</div> 
<div> class="col-xs-6 col-lg-6"> 
    <section class="banner-component"></section> 
</div> 
<div> class="col-xs-6 col-lg-6"> 
    <section class="banner-component"></section> 
</div> 

Пример 3: Первая строка содержит 3 дивы (COL-LG-4)

<div> class="col-xs-4 col-lg-4"> 
    <section class="banner-component"></section> 
</div> 
<div> class="col-xs-4 col-lg-4"> 
    <section class="banner-component"></section> 
</div> 
<div> class="col-xs-4 col-lg-4"> 
    <section class="banner-component"></section> 
</div> 
<div> class="col-xs-6 col-lg-6"> 
    <section class="banner-component"></section> 
</div> 

Пример 4: Первая строка содержит 3 дивы (Col-LG-4, Col-LG-6, Col-LG-2)

<div> class="col-xs-4 col-lg-4"> 
    <section class="banner-component"></section> 
</div> 
<div> class="col-xs-4 col-lg-6"> 
    <section class="banner-component"></section> 
</div> 
<div> class="col-xs-4 col-lg-2"> 
    <section class="banner-component"></section> 
</div> 
<div> class="col-xs-6 col-lg-6"> 
    <section class="banner-component"></section> 
</div> 

Answer 1

Я не считаю, что это возможно с использованием чистого CSS. Вот несколько вариантов использования jQuery. Во-первых, укажите конкретный класс/id в контейнер сетки (прямой родительский код столбцов).

Добавление класса на CSS

.with-top-margin{ 
    margin-top: 20px; 
} 

JQuery

var divs = $("#dynamic-cols-container > div"); 
var counter = 0; 

for(var i=0; i<divs.length; i++){ 
    var div = divs.get(i); 
    if(counter < 12) 
    $(div).addClass("with-top-margin"); 

    var divWidth = parseInt($(div).attr("class").split("col-lg-")[1].split(" ")[0]); 
    counter += divWidth; 
} 

Надежда это помогает. Вот fiddle

Answer 2

Если у вас есть возможность иметь все Col дивы в оберточную контейнер *

* требуется только, если последняя строка должна совпадать с нижней.

<div class="grid"> 
... any number of col divs 
</div> 

Тогда вы могли бы сделать:

// add top margin to all col divs and use translate to move them 
// up by the same amount (making first row align with top) 
[class*="col-"]{ margin-top: 20px; transform: translateY(-20px); } 

// in case you want the last row to align with the bottom 
// use a negative bottom margin on your container 
.grid { overflow: auto; margin-bottom: -20px; } 

С обертке:

без обертки: