Question

我遇到了麻烦。我有一个像这样的HTML的bootstrap 3网站：

<div class="item-container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="item">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="item">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="item">
    </div>
    // and so on...
  </div>
</div>

我想做到最后＆＃34;行＆＃34; （{1}}获取col

的（不是引导行）

当设备为margin-bottom: 0屏幕尺寸时：

xs

当设备为.item-container { .row { .col-xs-12.col-sm-6.col-md-4 { margin-bottom: 20px; @media screen and (max-width: $xs-max) { &:last-child { margin-bottom: 0; } } } } }屏幕尺寸时：

sm

选择最后一行＆＃34;行＆＃34; 但是，我遇到了三列列的问题。试图选择最后一行。

我做了一个jsfiddle：https://jsfiddle.net/rx03nan6/

我试图选择红框。

.item-container { .row { .col-xs-12.col-sm-6.col-md-4 { margin-bottom: 20px; @media screen and (max-width: $xs-max) { &:last-child, &:nth-last-child(2):nth-child(odd) { margin-bottom: 0; } } } } }只是一个断行，可以根据框数显示不同类型的布局。 <hr />请忽略br标签，我只是希望向您展示它的外观，所以请不要在jsfiddle中查看HTML。

Answer 1

因此，您只需要设置最后一行的项目样式，其中每行包含3个项目。

您不能只使用:nth-last-child(-n + 3)选择最后3项，因为当我们只想选择项目时，我们会说您有4个项目 - 这将选择项目2,3,4 4。

所以我们需要额外的逻辑：

1）我们总是选择最后一项

2）如果它还是项目（3n + 2） - 2,5,8等，我们只想选择倒数第二项。

3）我们只想选择第三个最后一项，如果它也是项目（3n + 1） - 1,4,7等。

所以选择器看起来像这样：

li:nth-child(3n + 1):nth-last-child(-n + 3),
li:nth-child(3n + 2):nth-last-child(-n + 2),
li:last-child {
  border-color: blue;
}

这里是Codepen demo

这里是updated fiddle

Answer 2

尝试此解决方案的列数，如一列，两列和三列。没有必要添加第n个孩子。这个解决方案依赖于父类，如.raw类

.item-container {
  .row {
    .col-xs-12.col-sm-6.col-md-4 {
      margin-bottom: 20px;
    }
   @media screen and (max-width: $xs-max) {
        & > div:last-child {
          margin-bottom: 0 !important;
        }
      }
  }
}

SCSS n-child网格布局

2 个答案:

这里是Codepen demo

这里是updated fiddle