波旁威士忌/整洁 - 如何脱离网格以在浏览器全宽显示一行

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>

有没有办法在波旁/整洁中做到这一点？

我目前处理它的方式是在我的核心元素上设置独立样式，而不是在容器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-wrapper）将自身居中到最大宽度的 100%。也许这对你有帮助。您可以在任何您喜欢的地方使用.wrapper。例如标题，英雄，您的主容器。希望这有帮助