css - 选择动态网格中第一行中的所有 div

Question

我正在使用具有 12 列的网格。我想给每个 div 一个 margin-top:20px 除了第一行的 div。但我很难找出第一行中有哪些 div，因为它未定义。第一行可以包含 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 选择器也不起作用。第一个 child ，第 n 个 child 。知道如何在第一行中选择 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)

<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 的一些替代方法。首先，为网格容器(cols 的直接父级)提供一些特定的类/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