grid-column-row mixinを使用したZurb Foundation 6

Question

私は奇妙な動作をしていて、私がgrid-column-rowを間違って使用しているのか不思議でした。

私は次のHTML構造を有する：

<div id="homeTop"> 
    <!-- homeTop content such as headings and other nested rows and columns --> 
</div> 
<div id="homeMain"> 
    <div id="homeMain-left"></div> 
    <div id="homeMain-right"></div> 
</div> 
<div id="homeBottom"> 
    <!-- homeBottom content such as headings and other nested rows and columns --> 
</div> 

を私は、このコンテンツのスタイルを次SCSSを持っている：私は、デスクトップサイズの画面上でページを表示すると

#homeTop { 
    @include grid-column-row; 
} 

#homeMain { 
    @include grid-row; 
} 

#homeMain-left { 
    @include grid-column(12); 

    @include breakpoint(medium) { 
    @include grid-column(8/12); 
    } 
} 

#homeMain-right { 
    @include grid-column(12); 

    @include breakpoint(medium) { 
    @include grid-column(4/12); 
    } 
} 

#homeBottom { 
    @include grid-column-row; 
} 

があり、 1行のCSSがhomeBottom divを右に浮かせてしまい、レイアウトを捨ててしまいます。問題を引き起こしてCSSのラインはここにある：column-row以来

#homeBottom:last-child:not(:first-child) { 
    float: right; 
} 

は、他の言葉で行と列、として機能する単一の要素であることを意味する、全幅コンテナ、私は困惑しているなぜ私を浮動小数点数のプロパティが必要になります。 column-rowの動作は、その親のlast-childであるかどうかに依存しないので、このCSSラインはcolumnsには意味がありますが、column-rowsでは意味がありません。

これはバグですか？column-rowを間違って使用していますか？私はちょうどgrid-rowとしてhomeBottomを設定することを避けようとしていますし、余分なhtml要素を内部に含めて、フル幅のgrid-columnとして動作させようとしています。ご覧のとおり、これはgrid-column-row mixinも使用していますが、homeTopでは必要ありません。これは私が誤ってそれを使用している可能性があると私に思い出させる。

は、私は別のオプションは、フロート宣言が含まれて自分のmy-grid-column-rowミックスインを定義することです推測：

@mixin my-grid-column-row { 
    @include grid-column-row; 
    float: none !important; 
} 

をしかし、それは必要ありませんように、これはそうです。

Answer 1

これは基盤の問題であるように見えます：

http://github.com/zurb/foundation-sites/issues/8108

今の私の回避策は、以下でgrid-column-rowミックスインを無効にするために次のとおりです。https：/

@mixin grid-column-row(
    $gutter: $grid-column-gutter 
) { 
    @include grid-row; 
    @include grid-column($gutter: $gutter); 
    float: none !important; 
}