Zurb Foundation 5：列似乎没有正确清理

Fiddle here: http://jsfiddle.net/w8sDS/

在这里小提琴:http://jsfiddle.net/w8sDS/

I am using Zurb Foundation 5. I am trying to create a layout that, on small (mobile) devices, will display as a 2x2 grid.
(on large screens this will all be in one row but with varying numbers of columns for each element, but I'm not worried about that part for right now. Just keep that in mind, and understand that that's why they are all in the same row in the HTML.)

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

Here is my 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>

When I view this at small screen widths, I see the first image aligned left, and the remaining three images all aligned right. Why doesn't this end up as a 2x2 grid? And how can I fix it so it does?

当我以小屏幕宽度查看时,我看到第一个图像左对齐,其余三个图像都对齐。为什么这最终不会成为2x2网格?我怎么能解决这个问题呢?

1 个解决方案

#1

OK, I think I got it, mostly based on dwreck08's answer. But I added the proper row > column nesting structure and put the collapse class back in so it works.

好吧,我想我得到了它,主要基于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/