选择动态网格中第一行中的所有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选择器也没有用。小孩，小孩。 知道如何在第一行中选择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

Answer 2

如果您可以选择将所有col div放在包装容器中*

*仅在最后一行与底部对齐时才需要。

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

使用包装器：

没有包装：