删除行中第一列和最后一列的填充

Question

我有一种情况，网格不能有外部左右填充。

如何设置 padding-left:0; 对于行中的第一列并设置 padding-right:0。这也应该在屏幕改变时......或产生类似的结果。

<div class="row line">
  <div class="large-2 medium-3 small-4 columns"></div>
  <div class="large-2 medium-3 small-4 columns"></div>
  <div class="large-2 medium-3 small-4 columns"></div>
  <div class="large-2 medium-3 small-4 columns"></div>
</div>

1. 大屏幕线
2. 中屏线
3. 小屏幕线

黄色空间应该没有填充，白色空间有默认的基础填充。

Answer 1

实现这一目标的一种方法是定位第一列和最后一列。

.row.line > .columns:first-child {
  padding-left: 0;
}
.row.line > .columns:last-child {
  padding-right: 0;
}

另一种选择是创建一个类以应用于第一列和最后一列。

<div class="row line">
  <div class="large-2 medium-3 small-2 columns column-first"></div>
  <div class="large-2 medium-3 small-2 columns"></div>
  <div class="large-2 medium-3 small-2 columns"></div>
  <div class="large-2 medium-3 small-2 columns column-last"></div>
</div>

.column-first {
  padding-left: 0;
}
.column-last {
  padding-right: 0;
}