Question

据我所知，大型12级只在大屏幕上显示内容。如果我像移动设备一样减小尺寸，它将不会显示任何内容，除非我指定另一个小的12级

现在我已经有了这个代码，并且它在移动设备上也显示了12个，在大屏幕上也显示了小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>

任何人都可以帮助我。我想在大屏幕上显示较大的12 div而在小屏幕上显示小6而不是大屏幕。我的代码出了什么问题。

Answer 1

12课只在大屏幕上显示内容。如果我像移动设备一样减小尺寸，它就不会显示任何内容，除非我指定另一个小型的12级＆＃34; 这个假设完全错误，只需查看文档http://foundation.zurb.com/docs/components/grid.html

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

你可以在一个div中使用不同大小的coloumns类，它会根据大小隐藏其他类定义。

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

基础仅在移动版本中显示图像

1 个答案: