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>

有没有办法在Bourbon / Neat中这样做？

我目前处理它的方式是在我的核心元素上设置个人风格，而不是在容器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。例如标题，英雄，你的主要容器。希望这有帮助

Bourbon / Neat - 如何突破网格以在浏览器宽度上显示一行？

1 个答案: