서체 크기가 변경되면 서스펜션 그리드가 컨테이너 크기를 변경합니다.이 문제를 해결하는 방법은 무엇입니까?

Question

나는 사지 그리드 1.0.9를 사용하고 혼란스러워하는 것을 발견했다.

".page_1"과 ".page_2"의 두 요소가 있습니다. 설정은 동일하지만 양쪽에 패딩 된 10 개의 열이 있습니다.

예기치 않은 동작을 발견했습니다. $container-style: static을 사용하면 해당 컨테이너에 적용된 글꼴 크기에 따라 컨테이너 크기가 변경되기 시작합니다.

font-size을 1em으로 변경하면 두 컨테이너가 다시 같은 크기가됩니다.

'$ container-style'을 'magic'으로 변경하면 두 컨테이너의 크기가 동일합니다. 이 문제는 $container-style' is set to 정적 일 때 요소에 지정된 글꼴 크기로만 발생합니다. '

내가 뭘 잘못하고 있습니까?/이것에 대한 해결책이 있습니까? 아래 코드.

$total-columns: 12; 
$column-width: 4em; 
$gutter-width: 1em; 
$grid-padding: $gutter-width; 
$container-style: static; 

#section_1 { 
    background-color: #963; 
    border: 4px solid green; 

    .pages_wrapper { 
    @include container; 
    } 

    .page { 
    border:1px solid yellow; 
    @include prefix(1); 
    @include span-columns(10,12); 
    @include suffix(1); 

    text-align: center; 
    color: #fff; 
    } 

    .page_1 { 
    font-size: 1em; 
    } 
    .page_2 { 
    font-size: 1.25em; 
    } 
} 

HTML :

<section id="section_1"> 
    <section class="pages_wrapper"> 
    <section class="page_1 page"> 
     <h1>Page 1</h1> 
    </section> 
    <section class="page_2 page"> 
     <h1>Page 2</h1> 
    </section> 
    </section> 
</section> 

스크린 문제를 나타내는 (최근 크롬)

$container-style:static;, :

Answer 1

.page의 폭 때문에, EM 계산된다 열/거터 너비를 ems (글꼴 크기 기반)로 설정합니다. .page_2에 .page_1보다 큰 글꼴 크기를 지정하면 컨테이너의 너비도 커집니다. 당신은 당신이 고정 된 컨테이너 폭을하여 열/제본 설정을 변경하거나 설정할 수 있습니다 정적 레이아웃을 사용하려면

는 :

$container-width: 960px; 

이 .pages_wrapper 폭에 960의 고정 폭을 적용합니다 .page의 비율은 %로 계산됩니다.

또는, 당신은 당신의 HTML을 변경하고 스팬 열 믹스 인 사용 용기 내부에 별도의 용기에 글꼴 크기를 적용 할 수 :

<section id="section_1"> 
    <section class="pages_wrapper"> 
    <section class="page"> 
     <div class="page_1"> 
     <h1>Page 1</h1> 
     </div> 
    </section> 
    <section class="page"> 
     <div class="page_2"> 
     <h1>Page 2</h1> 
     </div> 
    </section> 
    </section> 
</section>