避免填充第一列和最后一列

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

Answer 2

您可以通过在.row中嵌套另一个.row来实现此目的。当你这样做时，你会得到类似的东西：

.row .row {
width: auto;
margin-left: -0.9375rem; 
margin-right: -0.9375rem;
margin-top: 0;
margin-bottom: 0;
max-width: none;
}