動的グリッドの最初の行のすべてのdivを選択してください

Question

私は12列のグリッドを使用しています。私は最初の行のdivを除いて、すべてのdivにmargin-topを与えたい：20px。しかし、私はどのdivが最初の行にあるのかを知ることができません。最初の行には1〜12のdivが含まれます。

私はsassを使用していて、次の解決方法を試しましたが、これは同じ幅のdivでのみ機能します。最初の例では、2番目の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; 
    } 
} 

他のCSSセレクタも機能しませんでした。最初の子供、n番目の子供。 最初の行のdivをどのように選択することができますか？ここ

は、いくつかの例は、次のとおり

例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つのdiv（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つのdiv（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つのdiv（COL-LG-4、COL-LG-6、COL-LG-2）私は、これは純粋なCSSを使用して可能であるとは思わない

<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

含ま。 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; 
} 

は、この情報がお役に立てば幸いです。あなたは最後の行が下に合わせる必要がある場合にのみ必要な包装容器にすべてのCOLのdivを持つオプション*

*をお持ちの場合はここでfiddle

Answer 2

です。

<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; } 

をラッパーで：

ラッパーなし：