基金会仅在移动版本中显示图像答案

【问题标题】：foundation show images only in mobile version基金会仅在移动版本中显示图像
【发布时间】：2014-02-24 18:31:10
【问题描述】：

据我所知， large-12 类只在大屏幕上显示内容。如果我像在移动设备上一样减小尺寸，除非我分配另一个类 small-12，否则它不会显示任何内容

现在我有了这段代码，它在移动设备上也显示 large-12，在大屏幕上也显示 small-12。

        <div class="row">

          <div class="large-12  columns">
              <div class="panel">
                                        <img src="design/images/nationalskills_logo.png" />
                                        <img src="design/images/toyota_logo.png" style="float: right;"/>
              </div>
          </div>
          <div class="small-6 columns">
              <div class="panel">
                                        <img style="width: 30%;" src="design/images/nationalskills_logo.png" />
                                        <img style="width: 30%;"  src="design/images/toyota_logo.png" style="float: right;"/>
              </div>
          </div>
                    </div>

谁能帮帮我。我想在大屏幕上显示 large-12 div，只在小屏幕上而不是在大屏幕上显示 small-6。我的代码有什么问题。

【问题讨论】：

标签： zurb-foundation

【解决方案1】：

12 类只在大屏幕上显示内容。如果我像在移动设备上一样减小尺寸，除非我分配另一个类 small-12"，否则它不会显示任何内容这个假设是完全错误的，请参阅文档http://foundation.zurb.com/docs/components/grid.html

要调整图像大小，请使用交换选项。 http://foundation.zurb.com/docs/components/interchange.html

您可以在一个 div 中为列使用不同的大小类，该 div 会根据大小隐藏其他类定义..

 <div class="row">
 <div class="small-6 large-6  columns">
 <div class="panel">
  <img data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg,   (large)]" />
 <img class="right" data-interchange="[/path/to/default.jpg, (default)],  [/path/to/bigger-image.jpg, (large)]" />                           
 </div>
 </div>
 </div>

【讨论】：