如何在zurb 5基础上制作5列行

Question

我希望有一个5列row,只有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

Answer 1

基础网格基于每行12"单位".在您的示例中,您有5个<div>类medium-3和large-3= 15个单位.基金会将设法适应前4个(4*3 = 12个单位),然后第五个将被推到下面一行.

适合你的5个项目的一个想法是给所有东西一个medium-2宽度(10个单位),并unit在左边偏移一行(medium-offset-1第一个元素上的类)并告诉基金会第五个元素是你行中的最后一个(用end关于最后一个元素的类).

例如:

<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/

关键medium-offset-1是要使内容居中(以时尚之后):你有10个单位适合可能的12.偏移一个,使用end将使你的内容的每一面留下1个单位的差距.但是,如果您希望它位于页面左侧,请medium-offset-1从上面的示例中删除该类.

注意 - 您实际上只需要medium-2和medium-offset-2此处一样,默认情况下它也适用于large网格,除非被类large-*或类重写large-offset-*.

Answer 2

也许我参加聚会有点晚了,但如果你使用scss,你可以轻松实现这一目标.

.col5-unit{
  @include grid-column(2.4); // (12/5 = 2.4)
}

然后在你的HTML中

<div class="row">
  <div class="col5-unit"> Column 1 </div>
  <div class="col5-unit"> Column 2 </div>
  <div class="col5-unit"> Column 3 </div>
  <div class="col5-unit"> Column 4 </div>
  <div class="col5-unit"> Column 5 </div>
</div>

实际上,您可以拥有任何数量的列.只是传递参数(12/[required number of column])

Answer 3

像这样？ http://jsfiddle.net/PZuLm/

<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 2]"/>         
        </div>
        <div class="small-12 medium-2 columns">  
           <img src="http://placehold.it/480x600&text=[img 3]"/>    
        </div>
        <div class="small-12 medium-2 columns">    
           <img src="http://placehold.it/480x600&text=[img 4]"/>
        </div>
        <div class="small-12 medium-2 medium-pull-1 columns">    
           <img src="http://placehold.it/480x600&text=[img 5]"/> 
        </div>   
</div>