6

我刚开始和苏西一起玩。我有一个 12 列网格，上面有网格填充。现在我希望我的页面标题跨越整个网格，包括网格填充。我现在正在做的是计算整体宽度，然后在标题上设置负边距。这对我来说感觉相当hacky......有没有更清洁的方法呢？

$total-columns  : 12;
$column-width   : 3.5em;
$gutter-width   : 1.25em;
$grid-padding   : 2em;

$total-width: ( $total-columns * ($column-width + $gutter-width) ) + ( 2 * $grid-padding ) - $gutter-width;

header {
    height: 150px;
    width: $total-width;
    margin-left: -$grid-padding;
}
4

1 回答 1

13

你有两个不错的选择。一个是您所拥有的简化版本。由于块元素默认为 100% 宽度，因此您可以简单地消除宽度设置（以及所有那些 hacky 数学）。

header {
    height: 150px;
    margin: 0 0 - $grid-padding;
}

您的另一个选择是在页面上使用多个容器。这需要更改标记，但有时它是一种效果很好的简化。如果您将标头移到当前容器之外，并将其声明为它自己的容器，则可以解决问题。

（附带说明：如果您确实需要全宽，您可以简单地使用该columns-width()功能（用于内部宽度，无填充）或container-outer-width()用于包括填充在内的全宽。）

更新：

我一直在使用这个 mixin，在我需要的任何地方应用 bleed：

@mixin bleed($padding: $grid-padding, $sides: left right) {
  @if $sides == 'all' {
    margin: - $padding;
    padding: $padding;
  } @else {
    @each $side in $sides {
      margin-#{$side}: - $padding;
      padding-#{$side}: $padding;
    }
  }
}

一些例子：

#header { @include bleed; }
#nav { @include bleed($sides: left); }
#main { @include bleed($sides: right); }
#footer { @include bleed(space(3)); }
于 2012-07-04T01:03:05.923 回答