Zurb-Foundation块网格丢失单元格

时间:2014-11-17 14:27:20

标签: javascript css ember.js zurb-foundation

我使用Zurb Foundation块网格布局并遇到一个问题 我有这个代码与Ember.JS

<div class="row">
    <ul class="small-block-grid-2 large-block-grid-5">
         {{render Ember.JS View}}
    </ul>
</div>

Ember产生7个<li>元素,看起来应该是这样的 http://jsfiddle.net/67obcg00/
但是,在页面上整个网格向右移动。这样第一行中的第一个单元格为空,第二个单元格包含li#1 of 7 最后,最后一行包含两个单元格而不是一个单元格。

有什么建议吗? 谢谢。

1 个答案:

答案 0 :(得分:0)

以下是使用Ember 1.7和Zurb 4.1.6的工作jsbin

使用Ember 1.9 beta,Handlebars 2.0和Zurb 5.4.7的版本jsbin

使用css选择器[:nth-child][3]和pre ember.js 1.8所面临的问题是meta-morph标签,ember使用知道它负责更新的DOM的哪些部分。第n个子选择器将样式应用于脚本标记以及列表元素。

<ul class="small-block-grid-2 large-block-grid-5">
    <script id="metamorph-10-start" type="text/x-placeholder"></script><script id="metamorph-2-start" type="text/x-placeholder"></script>
   <li><img src="http://placehold.it/395x590" data-bindattr-287="287"></li>
   <script id="metamorph-2-end" type="text/x-placeholder"></script><script id="metamorph-3-start" type="text/x-placeholder"></script>
</ul>

使用css选择器:nth-of-type仅适用于指定类型的样式。

干杯我希望有所帮助。