选择动态网格中第一行中的所有 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;
    }
}

其他 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）

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

带包装：

没有包装：