foundation5/css - CSS 속성을 사용 중지/재설정합니다.

Question

재단에서 작업하면서 이미지를 작동하는 HTML로 변환하려고합니다. 미안하지만 나는 처음으로 기초를 사용하고 있습니다. 그러나 제 질문은 단지 그와 관련이 많지 않습니다. 여기 있습니다. 기초에서는 "블록 격자"를 사용할 때 기초가 li 요소에 일부 패딩을 적용합니다. 다음 이미지를보십시오.

나는이에 의해이 세 리 요소에 클래스 "마지막"을 지정했을 원하는 결과를 얻기 위해이 클래스

padding-bottom:0px; 

을 사용했다.

이제 모바일보기로 들어가면 위의 클래스로 인해 다음과 같은 결과가 나타납니다.

지금, 나는 미디어 쿼리를 사용하여 클래스 "마지막"일부 패딩을 할당하거나 내가 소형 장치에서 해당 클래스를 제거하기 위해 jQuery를 사용할 수있는 해결 방법을 알고있다. 그러나 그런 식으로, 재단은 자동으로 패딩을 적용하는 것이 아닙니다. 하지만이 속성을 사용하지 않으면 기초가 패딩을 처리합니다. 그게 가능하니? CSS 만 사용 하시겠습니까?

Answer 1

이런 경우에는 미디어 쿼리가 당신이 찾고있는 도구입니다. 기술적으로는 CSS뿐입니다.

Foundation은 프레임 워크이며 기본 스타일링을 가졌지 만 자신의 스타일에서 모든 사람/모든 프로젝트의 기본 스타일을 사용할 수는 없습니다.

기초의 열렬한 사용자로서 위의 예와 같이 많은 맞춤식 CSS를 작성해야하는 사례가 많이 있습니다.

나는 다음 중 하나를 구현하는 것이 :

1. 만 블록 격자 요소 패딩 탑을 사용, 여기 당신의 문제를 제거 생각합니다.

   그렇지 않으면

   $block-grid-elements: 12; 
   $block-grid-default-spacing: 0; // set this to 0, and then manually reset it to just be left-right-bottom padding. 
   $align-block-grid-to-grid: true; 
   
   
   // Somewhere in your foundation overrides css file. 
   ul.block-grid { 
       padding: 20px 20px 0 20px; 
   } 
   

2. , 기본 패딩을 유지하고 일부 미디어 쿼리 코드 쓰기 :

   <ul> 
   <li></li> 
   <li></li> 
   <li class="last-large"></li> 
   <li class="last-large last-small"></li> 
   <li class="last-large last-small"></li> 
   </ul> 
   
   
   @media #{$small-only} { 
       .last-small { 
        padding-bottom: 0;  
       } 
   } 
   
   @media #{$medium-up} { 
       .last-large { 
        padding-bottom: 0;  
       } 
   } 
   

을