html – 如何在zurb 5基础中做5列

我想要有一列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>

http://jsfiddle.net/V7TuY/4/

中等偏移-1的要点是将内容置于中心位置(以一种时尚之后)：您有10个单位适合可能的位置.偏移量为1,并且使用最终将使您在你的内容但是,如果您希望它位于页面的左侧,请从上面的示例中删除medium-offset-1类.

注意 – 您在这里确实只需要中等2和中等偏移量-2,默认情况下也适用于大型网格,除非被类big- *或large-offset- *覆盖.