在流体模式下使用Zurb基础网格是否有最佳做法？

Question

使用Zurb Foundation 4可同时提供小网格（用于768px以下的屏幕）和大网格以及从.show/hide-for-small到.show/hide-for-xlarge的各种可见性类。

开发流体，非固定宽度的布局，开发人员可以选择使用两个网格或根据屏幕大小显示/隐藏dom元素。对于某些星座（例如，当屏幕尺寸减小时从4列布局切换到3列布局），可能需要更复杂的测量。例子可以是底层DOM元素的结构转换或复制实际内容，并基于屏幕大小来显示/隐藏相关结构。

我的问题是如何在流体模式下使用Zurb基础网格的最佳做法？

Answer 1

我不确定您在Zurb基金会中的流体模式是什么意思。

关于从4列转换到3列布局从大到移动，我总是把可见性类放在行中。

<div class="row hide-for-small"> 
    <div class="large-3 columns"></div> 
    <div class="large-3 columns"></div> 
    <div class="large-3 columns"></div> 
    <div class="large-3 columns"></div> 
</div> 

<div class="row hide-for-medium-up"> 
    <div class="small-4 columns"></div> 
    <div class="small-4 columns"></div> 
    <div class="small-4 columns"></div> 
</div> 

否则正常行为是堆叠。你可以去从4列3列，并伸展你的一列12宽就像这样：

<div class="row"> 
    <div class="large-3 small-4 columns">Lorem ipsum dolor sit amet.</div> 
    <div class="large-3 small-4 columns">Eius, ex vitae consequuntur nulla!</div> 
    <div class="large-3 small-4 columns">Ipsam, assumenda ex non architecto.</div> 
    <div class="large-3 small-12 columns">Tempore ipsa provident deserunt vel.</div> 
</div> 

或

<div class="row"> 
    <div class="large-3 small-12 columns">Tempore ipsa provident deserunt vel.</div> 
    <div class="large-3 small-4 columns">Lorem ipsum dolor sit amet.</div> 
    <div class="large-3 small-4 columns">Eius, ex vitae consequuntur nulla!</div> 
    <div class="large-3 small-4 columns">Ipsam, assumenda ex non architecto.</div> 
</div>