청사진 CSS 프레임 워크

Question

를 사용하여 상자를 중심으로하는 방법을 내 _base.scss는 내 페이지에서

$blueprint-grid-columns: 12; 
$blueprint-container-size: 750px; 
$blueprint-grid-margin: 0px; 
// Use this to calculate the width based on the total width. 
// Or you can set $blueprint-grid-width to a fixed value and unset $blueprint-container-size -- it will be calculated for you. 
$blueprint-grid-width: ($blueprint-container-size + $blueprint-grid-margin)/$blueprint-grid-columns - $blueprint-grid-margin; 

다음 내가 갖고 싶어이 상자 안에 750 px 넓은

#big-box { 
    @include container; 
    background-color: #FFFFFF; 
    margin-top: 15px; 
    min-height: 550px; 
} 

을하는 큰 상자를 포함 센터에 정렬 상자하지만이 일을 얻을 수 없습니다. 다음 있도록 #login 상자가 중간에

#login{ 
    @include container; 
    margin-top: 15px; 
    @include column(11); 
    background-color: #F1F1F1; 
} 

내가 어떻게해야 내 코드? 지금의 모습의

Image :

Answer 1

이 실패하는 이유는 column 믹스 인이 요소의 폭을 설정하지만 또한 왼쪽 수레 (오른쪽 여백을 적용뿐만 아니라이다가 마지막 열이 아니라면, 마진이 없음). span은 너비를 설정하기 위해 믹스 인 column에 의해 내부적으로 사용됩니다. 따라서 여기 span을 사용하여 column에 추가 할 부동 소수점 및 마진을 얻지 않고 너비를 간단하게 설정할 수 있습니다. 여기 나침반 청사진 그리드 구현 밖으로

확인 :
https://github.com/chriseppstein/compass/blob/stable/frameworks/blueprint/stylesheets/blueprint/_grid.scss

그래서 당신은 당신이 원하는 폭을 얻을 대신 column의 span 사용하는 경우. 그런 다음 margin: 0 auto;을 적용하여 원하는 센터링을 얻을 수 있습니다. container도 이것을 설정합니다. 일반적으로 청사진에서 의도 된대로 container을 최상위 레이아웃 요소에 적용된 스타일로 사용하려고합니다. 직접 여백을 적용하는 경우 container이 설정하는 격자 너비를 재정의 할 필요가 없습니다.

다른 "그리드"방법은 상자를 가운데로 밀어 넣기 위해 열을 앞에 추가하거나 추가하는 것입니다. 예 : 레이아웃이 19 번이고 상자의 너비가 11 일 경우 @include prepend(4); 상자의 왼쪽에 4 개의 너비 열을 추가 할 수 있습니다.

#login { 
    // Don't include container. In blueprint "container" means this is an outer 
    // container for the grid, and has the grid width, centered on the page. 
    // @include container; 

    @include column(11); 

    // I have no idea how many columns your page has, but if it had 19, 4 left columns 
    // would effectively center the div. | 4 + 11 + 4 |. 
    // Adjust to your real layout. 
    @include prepend(4); 
}