너비가 고정 된 전체 폭 컨테이너. Sass, Bourbon Neat

Question

내 배경을 전체 너비로 만들고 싶습니다. 이미지 또는 색상 배경이 줄을 채우고 있습니다. 그러나, 나는 내용이 깔끔하게 표준 12 열에 걸쳐 중간에 앉아 싶습니다.

현재 내 구조는 다음과 같습니다

관련 말대꾸의 존재와

<div class="container"> 
    <section id="section"> 
     <div class="left-col"> 
      <p>some text</p> 
     </div> 
     <div class="right-col"> 
      <p>some text</p> 
     </div> 
    </section> 
    </div> 

:

.container 
+outer-container(100%) 
background-color: #fff 
padding: 40px 0 

#lead-text 
    +span-columns(12) 

    .left-col 
    +span-columns(4) 

    .right-col 
    +span-columns(8) 

이 브라우저의 전체 폭에 걸쳐 컨테이너가 발생합니다. 그러나 안쪽 구역도 마찬가지입니까? 나는 이것이 표준 12 열을 가로 질러 센터에 앉아 있고 싶다? 그것은 당연 할 수있는 .container 요소를 떠나,

이

.container { 
    background-color: pink; 
} 

#section { 
    @include outer-container; 
    background-color: #fff; 
} 
div.left-col { 
    @include span-columns(4); 
} 
div.right-col { 
    @include span-columns(8); 
} 

이이 섹션 outer-container 같은 요소가 깔끔한 취급한다 : 사전에

감사

Answer 1

나는 SCSS에서 다음을 수행 할 현재 HTML을 유지 당신이 배경을 추가 할 수 있도록 전체 브라우저 창 너비에 걸친 것. 내가 질문을받을 경우

Answer 2

바로 당신은

HTML은 "브레이크 아웃 - 오브 - 부모"하고 싶은

<div class="container"> 
    <div class="break-out">Content</div> 
</div> 

CSS

// use border-box to prevent padding from 
// being added to width (alway do this)  
html { box-sizing: border-box; } 
*,*:before,*:after { box-sizing: inherit; } 


// the container is aligned center with 
// a maximum width of xxx (doesn't matter) 
.container { 
    margin: 0 auto; 
    max-width: 960px; 
} 

// breaking out of the container 
.break-out { 
    // set the width to full screen width  
    width: 100vw; 

    // use calc to pull content back to the center 
    margin-left: calc(50% - 50vw); 

    // to make the content re-align with the container 
    // use the reversed calc to set padding 
    padding-left: calc(50vw - 50%); 
}