数据均衡器在无行列上不起作用

Question

我正在尝试设计一个与不同的显示尺寸兼容的页面，我有6个元素可以使用，我想在每行上显示3个大型到横向设备，每行2个中型设备和1个小型设备上的每行。我用下面的结构做到了这一点：

<div class="row" data-equalizer>
    <div class="small-12 medium-6 large-4 columns" data-equalizer-watch>
       <!-- content goes here -->
    </div>
    <div class="small-12 medium-6 large-4 columns" data-equalizer-watch>
       <!-- content goes here -->
    </div>
    <div class="small-12 medium-6 large-4 columns" data-equalizer-watch>
       <!-- content goes here -->
    </div>
    <div class="small-12 medium-6 large-4 columns" data-equalizer-watch>
       <!-- content goes here -->
    </div>
    <div class="small-12 medium-6 large-4 columns" data-equalizer-watch>
       <!-- content goes here -->
    </div>
    <div class="small-12 medium-6 large-4 columns" data-equalizer-watch>
       <!-- content goes here -->
    </div>    
</div>   

到目前为止，至少在逻辑上是好的，问题是当你在一些元素上有一个非常小的文本时，假设你在第三个元素上有一个非常短的文本，而在其他元素上有50-100个字符。在这种情况下，在large+屏幕上发生的情况是，第四个和第六个元素被放置在第三个元素之下，并且数据均衡器停止工作。第五个元素在第一个元素下面，第二个元素下面有一个空格。

正如你所看到的，我只使用了一行，这样内容就可以根据屏幕大小重新排列，但是这对我来说不起作用，我做错了什么？

Answer 1

在ZURB论坛上找到了答案，下面是我被告知要做的事情：

<ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>    
</ul>

链接到答案：http://foundation.zurb.com/forum/posts/35716

文档链接：http://foundation.zurb.com/docs/components/block_grid.html