html - Zurb 基金会 5 : columns don't seem to be clearing properly

Question

在这里 fiddle :http://jsfiddle.net/w8sDS/

我正在使用 Zurb Foundation 5。我正在尝试创建一个在小型(移动)设备上将显示为 2x2 网格的布局。
(在大屏幕上，这将全部排成一行，但每个元素的列数不同，但我现在并不担心这部分。记住这一点，并理解这就是为什么它们都在HTML 中的同一行。)

这是我的 HTML:

<div class="row collapse">
    <div class="small-6 columns">
        <img src="http://placehold.it/350x400/ccc/000&text=350x400" alt="" />
    </div>
    <div class="small-6 columns">
        <img src="http://placehold.it/350/000/ccc&text=350x350" alt="" />
    </div>
    <div class="small-6 columns">
        <img src="http://placehold.it/350/ccc/000&text=350x350" alt="" />
    </div>
    <div class="small-6 columns">
        <img src="http://placehold.it/350/000/ccc&text=350x350" alt="" />
    </div>
</div>

当我在小屏幕宽度下查看时，我看到第一张图片左对齐，其余三张图片都右对齐。为什么这最终不是 2x2 网格？我该如何修复它？

Answer 1

好的，我想我明白了，主要是基于 dwreck08 的回答。但是我添加了正确的行 > 列嵌套结构并将折叠类放回原处，这样它就可以工作了。

<div class="row collapse">
    <div class="small-12 medium-8 columns">
        <div class="row collapse">
            <div class="small-6 columns">
                <img src="http://placehold.it/350x400/ccc/000&text=350x400" alt="" />
            </div>
            <div class="small-6 columns">
                <img src="http://placehold.it/350/000/ccc&text=350x350" alt="" />
            </div>
        </div>
    </div>
    <div class="small-12 medium-4 columns">
        <div class="row collapse">
            <div class="small-6 columns">
                <img src="http://placehold.it/350/ccc/000&text=350x350" alt="" />
            </div>
            <div class="small-6 columns">
                <img src="http://placehold.it/350/000/ccc&text=350x350" alt="" />
            </div>
        </div>
    </div>
</div>

fiddle :http://jsfiddle.net/w8sDS/2/