避免填充行

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