부르봉 깔끔한 격자, 모바일 브레이크 포인트

Question

나는 깔끔한 그리드 프레임 워크를 사용하는 정말 기본적인 웹 사이트를 가지고 있습니다. 사이트 (http://neat.bourbon.io/examples/)와 같은 효과를 얻으려고합니다. 800px 너비에서 그리드는 중단 점을 가지며 스팬 열을 삭제하고 100 % 너비로 이동합니다.

아래 코드는 래퍼와 2 개의 4 및 8 스팬 div를 출력합니다. 브라우저를 300px까지 작게 만들면 그리드가 유지되고 제목과 콘텐츠 divs가 중단되지 않고 전체 너비가 100 %가됩니다.

어떻게이 효과를 얻을 수 있습니까? 나는 기본적으로 div를 100 %로 만들려고 시도했으며 at 및 중단 점은 범위 열을 추가하지만 작동하지 않습니다. 감사.

.wrapper { 
@include outer-container; 
.title {@include span-columns(4);} 
.content {@include span-columns(8);} 
} 

<div class="wrapper"> 
<div class="title"></div> 
<div class="content"></div> 
</div> 

Answer 1

이렇게하려면 중단 점을 지정해야합니다. 그냥 @include Neats media($your_settings) 그리고 준비가 끝났습니다. here을 더 읽으십시오. 다음과 같은 내용 :

.wrapper { 
    @include outer-container; 

    .title { 
    @include span-columns(4); 

    @include media(max-width 300px) { 
     @include span-columns(12); // or whatever you need for 100% width 
    } 
    } 

    .content { 
    @include span-columns(8) 
    } 
}