以下 -
$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;
很奇怪!