我想要有一列5列,只有1列用于小型设备屏幕,宽度小于480px.
我是新兴的zurb基金会,仍然在学习.
小提琴示例http://jsfiddle.net/V7TuY/1/
<div class="row">
<div class="small-6 medium-3 large-3 columns">
<img src="http://placehold.it/480x600&text=[img 1]" />
<p></p>
</div>
<div class="small-6 medium-3 large-3 columns">
<img src="http://placehold.it/480x600&text=[img 2]" />
<p></p>
</div>
<div class="small-6 medium-3 large-3 columns">
<img src="http://placehold.it/480x600&text=[img 3]" />
<p></p>
</div>
<div class="small-6 medium-3 large-3 columns">
<img src="http://placehold.it/480x600&text=[img 4]" />
<p></p>
</div>
<div class="small-6 medium-3 large-3 columns">
<img src="http://placehold.it/480x600&text=[img 5]" />
<p></p>
</div>
更好的这种事情与列或列表ul li
解决方法
在你的例子中,你有5< div>每行中等3和大3 = 15单位.基金会将配合前4名(4 * 3 = 12单位),然后第五名将被推到下面.
一个想法适合您的5个项目,是给所有的中等2宽度(10个单位),并将该行左偏移一个单位(类medium-offset-1 on first element),并告诉基金会第五个元素是你的行中的最后一个(end on the last element课).
例如：
<div class="row">
<div class="small-12 medium-2 medium-offset-1 columns">
<img src="http://placehold.it/480x600&text=[img 1]"/>
</div>
<div class="small-12 medium-2 columns">
<img src="http://placehold.it/480x600&text=[img 1]"/>
</div>
<div class="small-12 medium-2 columns">
<img src="http://placehold.it/480x600&text=[img 1]"/>
</div>
<div class="small-12 medium-2 columns">
<img src="http://placehold.it/480x600&text=[img 1]"/>
</div>
<div class="small-12 medium-2 columns end">
<img src="http://placehold.it/480x600&text=[img 1]"/>
</div>
</div>
中等偏移-1的要点是将内容置于中心位置(以一种时尚之后)：您有10个单位适合可能的位置.偏移量为1,并且使用最终将使您在你的内容但是,如果您希望它位于页面的左侧,请从上面的示例中删除medium-offset-1类.
注意 – 您在这里确实只需要中等2和中等偏移量-2,默认情况下也适用于大型网格,除非被类big- *或large-offset- *覆盖.
