SCSS nth-child 网格布局答案

【问题标题】：SCSS nth-child grid layoutSCSS nth-child 网格布局
【发布时间】：2016-11-20 14:36:59
【问题描述】：

我遇到了麻烦。我有一个带有 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>

我想让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屏幕尺寸时：

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

选择最后一个“行”效果很好。但是，我在处理三列行时遇到了问题。正在尝试选择最后一行。

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

我正在尝试选择红色框。

<hr /> 只是一个断线，用于向您显示根据框数可以具有的不同类型的布局。 <br /> 请忽略 br 标签，我只是想让你看看它的样子，所以请不要查看 jsfiddle 中的 HTML。

【问题讨论】：

标签： html css sass css-selectors

【解决方案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,etc.

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

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

【讨论】：

【解决方案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;
        }
      }
  }
}

【讨论】：