代码之家 › 专栏 › 技术社区 › andig

是否有在流体模式下使用Zurb Foundation网格的最佳实践?

zurb-foundation css

andig · 技术社区 · 13 年前

使用Zurb Foundation 4提供了小网格(适用于768px以下的屏幕)和大网格,以及从.show/hide for small到.show/hide for xlarge的各种可见性类。

开发一个流动的、非固定宽度的布局,开发人员可以根据屏幕大小选择同时使用网格或显示/隐藏dom元素。对于某些星座(例如,当屏幕尺寸减小时,从4列布局切换到3列布局),可能需要更复杂的措施。示例可以是底层dom元素的结构转换或复制实际内容以及基于屏幕大小显示/隐藏相关结构。

我的问题是,是否有在流体模式下使用Zurb Foundation网格的最佳实践?

1 回复 | 直到 13 年前

JAMESSTONEco 13 年前

我不确定你所说的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>

推荐文章

Matt · 基础6使用SASS更改排水沟宽度

8 年前

Dhiraj Sharma · 网页包中的基础抛出错误

8 年前

coolsaint Christian C. Salvadó · 在Foundation 6.4.3卡中,如何阻止图像在Flexbox容器内拉伸?

9 年前

Nir Tzezana · Foundation 6 catch drilldown click事件

9 年前

tomislav_t · 将单元均匀分布在Zurb基础6的立柱上

9 年前

Dwight Gunning · Karma单元测试Vue。js+基础

9 年前

Run · 基础6.4.1-引导。容器等效物?

9 年前

foufrix · Css滚动和大小调整

9 年前

ManxJason · 使用基础“柔性网格”集中对齐嵌套项

9 年前

Ahad Porkar · Foundation 6子菜单展开不工作

10 年前