幅が固定された幅の広い容器。 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列の中央に置いておきたいですか？私はSCSSで次の操作を行いますあなたの現在のHTMLを維持事前に

おかげ

Answer 1

：

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

これは、それは自然なことです行うには.container要素を残して、outer-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%); 
}