Bourbon / Neat - 如何打破网格以全浏览器宽度显示一行？答案

【问题标题】：Bourbon / Neat - How to break out of grid to display a row at full browser width?Bourbon / Neat - 如何打破网格以全浏览器宽度显示一行？
【发布时间】：2016-01-25 12:03:48
【问题描述】：

我习惯于在 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>

有没有办法在 Bourbon/Neat 中做到这一点？

我目前处理它的方式是在我的核心元素上设置单独的样式，而不是在容器 div 上：

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

在我想要全宽的容器上：

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

但我想知道是否有一种简单的“突破”方法可以对内部嵌套元素执行此操作。

【问题讨论】：

前几天我一直在努力解决这个问题。我的解决方案（不完美）是增加外容器的最大宽度。 @include outer-container(2160px);。值得深思。

标签： twitter-bootstrap css bourbon neat

【解决方案1】：

这就是我为页脚所做的：

HTML

  <footer>
      <div class="wrapper">

       </div>
 <footer>

CSS

footer{
  background: $lightest-grey;
}

.wrapper{
  @include outer-container;
}

外部容器 (.footer-wrapper) 会以 100% 的最大宽度居中。也许这对你有帮助。你可以在任何你喜欢的地方使用.wrapper。例如标题，英雄，你的主要容器。希望这会有所帮助

【讨论】：