html - 如何在zurb 5基础中制作5列行

我希望row中有5列，而宽度小于480px的小型设备屏幕只有1列。

我是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处理这种事情是否更好

最佳答案

The foundation grid is based on 12 "units" per row。在您的示例中，您有5个<div>，每个类的medium-3和large-3 = 15个单位。基金会将设法使前4个单位适合(4 * 3 = 12个单位)，然后将第5个单位推到下面的行中。

适合您5个项目的一个想法是，为所有内容赋予medium-2宽度(10个单位)，并使行向左偏移一个unit(类 medium-offset-1 on first element)，并告诉Foundation第五个元素是您行中的最后一个元素(类 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/
medium-offset-1的重点是使内容居中(经过某种方式):您有10个单位可以放入一个可能的12个中。偏移一个，然后使用end将使您在内容的每一侧都留有1个单位的间隙。但是，如果您希望它位于页面的左侧，只需从上面的示例中删除medium-offset-1类。

注意-您实际上只需要这里的medium-2和medium-offset-2，因为默认情况下，这也适用于large网格，除非被large-*或large-offset-*类覆盖。

关于html - 如何在zurb 5基础中制作5列行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24954137/