Bourbon/Neat - Как вырваться из сетки, чтобы отобразить строку с полной шириной браузера?

Question

Я привык делать этот трюк в Bootstrap 3 временно выйти из сетки и показать строку на всю ширину браузера (полезно для строк, которые нуждаются в полной ширине цвет фона):

<div class="container" style="background-color:red"> 
    <div class="row"> 
     <div class="col-xs-12"> 

      <div class="container"> 
       <div class="row"> 
        <div class="col-xs-12"> 

         Content is displayed within the normal grid here 
         but within a full-width red background. 

        </div> 
       </div> 
      </div> 

     </div> 
    </div> 
</div> 

Есть способ сделать это в бурбоне/аккуратно?

Путь, я в настоящее время обработки это путем создания indiividual стилей на своих основных элементов, а не на контейнер DIV:

header, 
main, 
footer { 
    @include outer-container; 
} 

и на контейнере, что я хочу быть полная ширина:

nav { 
    @include outer-container(100%); 
} 

, но мне интересно, есть ли простой способ «взлома» сделать это на внутренних вложенных элементах.

Answer 1

Это то, что я сделал для моей сноски:

HTML

<footer> 
     <div class="wrapper"> 

     </div> 
<footer> 

CSS

footer{ 
    background: $lightest-grey; 
} 

.wrapper{ 
    @include outer-container; 
} 

Наружного-контейнер (.footer-обертка) будет центрировать себя на 100% максимальная ширина. Возможно, это поможет вам. Вы можете использовать .wrapper в любом месте. например, заголовок, герой, ваш основной контейнер. Надеюсь, это поможет