1

我使用的是 Singularity Grid System 版本 1.1.2，我的 12 列网格的变量是 $grids: 12, $gutters: 1/3。网格布局工作正常。现在我想给出覆盖整个浏览器宽度的顶部页眉组、中间部分和页脚背景颜色。所有内容都居中，占总宽度的 90%。

4

2 回答 2

4

不幸的是，创建全彩色出血是一项很丑陋的任务，但它很容易做到。您将要执行以下操作：

<div class="full-stripe header">
  <header class="container"></header>
</div>
<div class="full-stripe main">
  <main class="container"></main>
</div>
<div class="full-stripe footer">
  <footer class="container"></footer>
</div>

您需要做的是将站点的每个部分包装在一个 div 中，该 div 将拉伸页面的整个宽度，同时保持其中包含的内容片段共享一个类似的类。您的 CSS 将如下所示：

.full-stripe {
  width: 100%;
  @include clearfix;
  &.header {
    background: red;
  }
  &.main {
    background: green;
  }
  &.footer {
    background: blue;
  }
}
.container {
  margin: 0 auto;
  padding: 0;
  max-width: 68.5em;
  @include clearfix;
}

我创建了一个 CodePen 来证明这一点。该容器有一些额外的样式，使其脱颖而出并帮助可视化正在发生的事情：

于 2013-08-18T12:35:27.470 回答
2

您可能会发现工具包中的嵌套上下文混合很有用。它会找到百分比容器的上下文，因此您的 hgroup 将使其全宽。@include nested-context(90%, center)

于 2013-08-18T14:53:59.980 回答