Контейнер с полной шириной с фиксированной шириной. 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> 

С соответствующей Sass существа:

.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 колос?

Заранее спасибо

Answer 1

Поддержание текущего HTML Я хотел бы сделать следующее SCSS:

.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, оставляя .container элемент, чтобы сделать это естественно охватывая всю ширину окна браузера, позволяя вам добавить фон.

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%); 
}