Récipient pleine largeur avec contenu de largeur fixe. Sass, Bourbon Neat

Question

Je souhaite faire mon fond pleine largeur, avec un fond d'image ou de couleur remplissant la rangée. Cependant, je voudrais que le contenu soit au milieu des 12 cols standard dictés par la propreté.

Actuellement ma structure est:

<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> 

Avec l'être SASS pertinente:

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

Il en résulte dans le récipient couvrant toute la largeur du navigateur. Mais c'est aussi le cas de la section intérieure? Je voudrais que ce soit assis au centre à travers les 12 cols standard?

Merci à l'avance

Answer 1

Garder votre HTML actuelle, je ferais ce qui suit dans 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); 
} 

Cela rend la section l'élément traite soignée comme le outer-container, laissant l'élément .container de le faire est naturel chose de couvrir toute la largeur de la fenêtre du navigateur, ce qui vous permet d'ajouter un arrière-plan.

Answer 2

Si je bien compris votre question que vous voulez faire un "break-out-of-parent"

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