我遇到了将zen-grid整合到drupal中的问题。我安装了sass和指南针并使用它们。然后我创建了一个包含3个字段的内容类型。这给了我像html这样的结构:
<article class="node-1 node node-layout1 node-promoted view-mode-full clearfix" typeof="sioc:Item foaf:Document" about="/node/1">
<div class="field field-name-field-topleft field-type-text-long field-label-above">
<div class="field field-name-field-topmid field-type-text-long field-label-above">
<div class="field field-name-field-topright field-type-text-long field-label-above">
</article>
然后我尝试使用zen网格来创建这样的布局:
topleft___________topmid_______________topright
所以我使用了那段代码:
$zen-column-count: 5; // Set the total number of columns in the grid.
.node-layout1{
max-width:1200px;
@include zen-grid-container; // Apply this mixin to the container.
}
.field-name-field-topleft {
@include zen-grid-item(2, 1);
}
.field-name-field-topmid {
@include zen-grid-item(1, 2);
}
.field-name-field-topright {
@include zen-grid-item(2, 3);
}
所有作品都很好我将所有3个元素排成一行,但它们的宽度和偏移量太大,topmid在topright应该完成的地方开始,所以我的页面在此之后太大了。
这是css我从指南针为所有3个元素生成:
.field-name-field-topleft {
float: left;
margin-left: 0;
margin-right: -200%;
width: 200%;
}
.field-name-field-topmid {
float: left;
margin-left: 100%;
margin-right: -200%;
width: 100%;
}
.field-name-field-topright {
float: left;
margin-left: 200%;
margin-right: -400%;
width: 200%;
}
我发现问题在于
$zen-column-count: 5;
没有被应用,它被设置为从1开始,似乎我无法改变它。
答案 0 :(得分:1)
这听起来像罗盘1.0的问题,如下所述:
https://github.com/JohnAlbin/zen-grids/issues/68
修复是在你的zen-grid-item调用中添加$ zen-float-direction,$ zen-column-count,即
@include zen-grid-item(2, 1, $zen-float-direction, $zen-column-count);
答案 1 :(得分:1)
在&#34; $ zen-column-count:5&#34;结尾处使用!global ;为我修好了。看来你必须强迫zen使用新的变量。
$zen-column-count: 5 !global;