행의 첫 번째 및 마지막 열에 대한 패딩 방지

Question

그리드에 외부 왼쪽 및 오른쪽 패딩을 사용할 수없는 경우가 있습니다.

패딩 왼쪽 설정 방법 : 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. 라인은 공백 기본 토대 패딩을 갖는다.

   

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 { 
width: auto; 
margin-left: -0.9375rem; 
margin-right: -0.9375rem; 
margin-top: 0; 
margin-bottom: 0; 
max-width: none; 
}