html - 当行宽为 960px 时，如何在 zurb foundation 中使四个图像在单行中显示

Question

我是 zurb foundation fromework 的新手，当屏幕尺寸为 960px 时，我无法在一行中显示四张图片

http://jsfiddle.net/57fBK/1/ 对于桌面版，我已将行宽设置为 960px。

当屏幕尺寸在 768px - 960px 之间时，我希望显示 4 张图像。

我希望在屏幕尺寸介于 320px - 769px 之间时显示两张图片；

<div class="row">

        <div class="large-3 small-6 columns">   
          <img src="http://placehold.it/480x600&text=[img 1]"/> <p></p>
        </div>

        <div class="large-3 small-6 columns">
           <img src="http://placehold.it/480x600&text=[img 2]"/> <p></p>

        </div>
        <div class="large-3 small-6 columns">  
           <img src="http://placehold.it/480x600&text=[img 3]"/> <p></p>

        </div>
        <div class="large-3 small-6 columns">    
           <img src="http://placehold.it/480x600&text=[img 4]"/> <p></p>

        </div>

Answer 1

只需添加medium-3 http://jsfiddle.net/57fBK/2/

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