0

禅グリッドの drupal への統合に問題があります。私はsassとcompassをインストールして使用しています。次に、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>

次に、禅グリッドを使用してそのようなレイアウトを作成しようとしました:

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つの要素すべてを一列に並べますが、それらの幅とオフセットが大きすぎます。

これは、3つの要素すべてに対してコンパスから生成されたcssです。

.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に設定されていて、変更できないようです。

4

2 に答える 2

1

ここに文書化されているように、コンパス 1.0 の問題のようです。

https://github.com/JohnAlbin/zen-grids/issues/68

修正は、$zen-float-direction, $zen-column-count を zen-grid-item 呼び出しに追加することです。

@include zen-grid-item(2, 1, $zen-float-direction, $zen-column-count);
于 2014-10-29T11:47:20.497 に答える