避免填充行

Question

中的第一个和最后一列我有一种情况，网格不能有一个外部左右填充。

如何设置填充左：0;对于第一列的行和设置填充权：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; 
}