0

以下 -

$total-columns: 12;
$column-width: 60px;
$gutter-width: 20px;
$grid-padding: 10px;
$container-style: static;
.centre { @include container; }

产生这个 css -

width: 1020px;
padding-left: 10px;
padding-right: 10px;
margin-left: auto;
margin-right: auto;

即使该容器中的所有列都已正确计算出来。所以

#logo { @include span-columns( 5, 12 ); }

正确地产生一个宽度为 380px 和右边距为 20px 的元素。

nav { @include span-columns( 7 omega, 12 ); }

然后正确创建一个 540px 的元素并将其放置在 #logo 的右侧，没有边距。但是，这些元素的父 #centre 容器是 1020 像素宽而不是 940 像素宽。

任何人都可以解释为什么会这样吗？

提前致谢。

[更新]

添加

$container-width: 1140px;

正确产生

width: 1120px;

但是，添加

$container-width: 960px;

具有使指南针停止观看文件的效果。它向我显示“检测到更改...”，但随后无法执行“覆盖...”命令。删除罗盘后，我必须取消罗盘并再次运行罗盘手表

$container-width: 960px;

很奇怪！

4

1 回答 1

0

尝试重新创建经典的 960gs 16 列网格时遇到同样的问题：

$total-columns: 16;
$column-width: 40px;
$gutter-width: 20px;
$grid-padding: 10px;

生成一个940px宽而不是960px宽的容器。

苏西 v1.0.5

于 2013-05-15T13:59:01.710 回答