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

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. 小屏幕行

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

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS90R0FKQy5wbmcifQ==” alt =“在此处输入图像说明”>

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