Bourbon 가이드가 4 열을 표시 할 때에도 여전히 12 열을 사용합니다.

Question

저는 건물에있는 정적 Octopress 사이트에서 Bourbon과 Neat를 사용하고 있습니다. 가이드 ($visual-grid: true;)를 켜는 것 외에 변경없이 _grid-settings.scss 파일을 사용하고 있습니다. 내 screen.scss에서 나는 부르봉 왕가 후 그리드 설정을로드하지만, 깔끔한 전에 해요 :

@import "bourbon/bourbon"; 
@import "grid-settings"; 
@import "neat/neat"; 

나는 작은 화면은 넓은 4 열 수 있어야 기본 그리드 설정을 사용하고 있기 때문에.

$phone-portrait: new-breakpoint(max-width $tiny-screen 4); // 450px 

I 미만 450 픽셀있어 화면상의 사이트를 참조

는 시각적 격자 (4) 열을 도시하지만, 레이아웃은 여전히 ​​12 개 컬럼을 사용하는 것이다. 레이아웃에서 4 열 div를 사용하는 곳이 여러 곳 있습니다. 모바일에서는 페이지가 4 열이기 때문에 전체 폭이어야하지만 페이지의 너비는 3 분의 1입니다. 으로 @include span-columns(4)을 대체하여 모바일에서 12 열을 계속 사용하는지 확인할 수 있습니다. 12 개의 열 div가 모바일에서 전체 너비 인 유일한 div입니다.

가이드와 레이아웃에 동일한 수의 열을 사용하는 이유는 무엇입니까? 나는 당신이 당신의 코드에서 쉼표 누락 생각

Answer 1

을하는 데 도움이 열의 수를 변경하는 breakpoint ($phone-portrait: new-breakpoint(max-width $tiny-screen 4);). 처음에는 이것이 실제로 진행되고 있다는 것을 이해할 때까지 이상하게 보였습니다. div를 4 열로 확장하도록 설정할 때, neat는 열의 수를 취해 현재의 중단 점에서 열의 총 수로 나눕니다. 내 경우에는 0.333으로 div의 너비 비율로 사용됩니다. 문제는 칼럼의 총 수가 나중에 변경되어 중단 점을 수행하더라도 변경되지 않는다는 것입니다. 내 div는 항상 33.3 % 너비가 될 것입니다.

는

$phone-portrait: new-breakpoint(max-width $tiny-screen 4); 

.my-div { 
    @include span-columns(4); 
} 

@include media($phone-portrait) { 
    .my-div { 
     @include span-columns(4); 
    } 
} 

이 내 사업부가 $phone-portrait 중단 점에 대한 폭 넓은 100 %가됩니다 보장 : 내가 뭘해야이처럼 span-columns 중단 점에 대한 미디어의 선택 안에 포함 반복이다.

Answer 2

, 당신은 필요가 있다고 생각 :

$phone-portrait: new-breakpoint(max-width $tiny-screen, 4); // 450px 

희망이 그것은 문제가 내 사업부에 @include span-columns(4)를 사용하지 않을 예정이었다 밝혀