Zurb Foundation의 html 기반 그리드 클래스에서 다른 방향을 어떻게 목표로합니까?

Question

이 질문은 프로토 타이핑에만 관련이 있습니다. 나는 그것이 (S) CSS를 통해 시맨틱 그리드 클래스로 할 수 있다는 것을 알고 있지만 나는 Zurb Foundation의 비 전형적인 HTML 기반 그리드 클래스를 언급하고있다.

저는 이런 식으로하려고합니다. 왜 효과가없는 것일까 요?

<div class="medium-portrait-4 medium-landscape-7">...</div> 
<div class="medium-portrait-8 medium-landscape-5">...</div> 

Answer 1

Zurb Foundation v5.3.0 이상 위에서 설명한대로 방향 지정을 직접 타겟팅 할 수있는 패키지 부족 클래스는 없습니다.

그러나 mixin을 사용하면 similar question on the foundation site에서 복사 한 다음 예제와 같은 원하는 결과를 제공하는 사용자 정의 클래스를 만들 수 있습니다.

.class-name { 
    @media #{$small-only} and (orientation: portrait) { 
    @include grid-column(2); 
    } 
    @media #{$small-only} and (orientation: landscape) { 
    @include grid-column(4); 
    } 
@media #{$medium-up} and (orientation: landscape) { 
    @include grid-column(6); 
    } 
} 

Answer 2

이하려면 난 _settings.scss의 중단을 변경 나 모바일 작은 COL, 정제 된 세로 매체 COL, 큰 COL 대를 사용

small: 0, 
medium: 750px, 
large: 970px, 
xlarge: 1170px, 
xxlarge: 1440px, 

태블릿 프리

해당 작업