격자 열이 올바르게 표시되지 않습니다.

Question

Bourbon Neat을 사용하고 있습니다. I 그리드 설정에서 중단 점을 설정하고, 이동 버전 I이 같은 세트 4 : I는 좌측 및 좌측 및 우측 3 1 추천 오른쪽 용기 세트

$mobile: new-breakpoint(max-width 480px 4); 

; 이 같은 :

.demo 
{ 

    @include outer-container; 

    .leftContainer 
    { 
    @include span-columns(6); 
    background-color:crimson; 
    @include media($mobile) { 
     @include span-columns(3 of 4); 
    } 
    } 

    .rightContainer 
    { 
    @include span-columns(6); 
    background-color:blue; 
    } 

    @include media($mobile) { 
    @include span-columns(1 of 4); 
    } 
} 

그러나 어떻게 든 용기 대신 3 개 1 열을 걸쳐 서로에 스택. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

Answer 1

HTML을 보지 않고도 말하기는 어렵지만 .rightContainer 코드는 손상된 것 같습니다.

.demo{ 

    @include outer-container; 

    .leftContainer { 
    @include span-columns(6); 
    background-color:crimson; 

    @include media($mobile) { 
     @include span-columns(3 of 4); 
    } 
    } 

    .rightContainer{ 
    @include span-columns(6); 
    background-color:blue; 

    @include media($mobile) { 
     @include span-columns(1 of 4); 
    } 
    } 
} 

Answer 2

당신은 @include span-columns(3 of 4)를 사용하는

하지만 다른 사업부와 내부에 중첩 된 .leftContainer 및 .rightContainer ICC를 모르고을 : 두 번째 @include 미디어 ($의 모바일) {}이 시도 외부 .rightContainer {}의

입니다 span-columns()이므로 부모의 열을 인수로 전달하면 안됩니다.

이 시도 :

.demo{ 

    @include outer-container; 

    .leftContainer { 
    @include span-columns(6); 
    background-color:crimson; 

    @include media($mobile) { 
     @include span-columns(3); /*Change this line*/ 
    } 
    } 

    .rightContainer{ 
    @include span-columns(6); 
    background-color:blue; 

    @include media($mobile) { 
     @include span-columns(1); /*and this one*/ 
    } 
    } 
} 

어쩌면 당신이 더 많은 도움을 this documentation를 확인할 수 있습니다.