zurb 基础，具有单个响应式图像，适用于 320 - 480 屏幕尺寸

Question

我刚开始探索 zurb Foundation，我想知道如果设备屏幕尺寸在 320 - 480 像素之间，如何连续显示一张图像。

例如http://jsfiddle.net/8ww2v/

桌面版 第一行：滑块 第二行：4张图片 第三行：3 张图片

第二行和第三行可以是以下矩阵 4x6、4x4、4x3 和 3x6、3x4、3x3 中的任何一个

手机版 使用当前代码，它打破了连续两个图像的行形成，即使对于 320 像素宽度的小屏幕，也显示两个图像。

image image

image image

image image

我想要的是，如果屏幕宽度在 320 - 480 之间，那么它应该连续显示 1 个图像

image

image

image

image

image

image

image

我不确定如何在基础中实现这一点或我需要更改哪些属性我尝试了一些东西但它没有工作

我希望在屏幕 320 - 480 上发生这样的想法

   <div class="row">
          <p>
    <div class="large-4 small-6 columns">   
      <img src="http://placehold.it/600x400&text=%5Bimg%5D"/>
      <p>Lorem sorum Lorem sorum  Lorem sorum  Lorem sorum </p>
    </div>
    <div class="large-4 small-6 columns">
       <img src="http://placehold.it/600x400&text=%5Bimg%5D"/>
      <p>Lorem sorum Lorem sorum  Lorem sorum  Lorem sorum </p>
    </div>
    <div class="large-4 small-6 columns">  
       <img src="http://placehold.it/600x400&text=%5Bimg%5D"/>
      <p>Lorem sorum Lorem sorum  Lorem sorum  Lorem sorum </p>
    </div>
          </p>
  </div>

Answer 1

你可以试试下面的代码：

Working Demo

@media all and (max-width: 320px){
 .columns {
    float:none !important;
 }
 .small-6{
    width:100%;

     }
}