ZURB Foundation:我应该为每个“行”创建一行吗?

义人

那么,我可以创建一个<div class="row">并向其中推送列吗?列的总长度将大于12个单位。是不好的风格,我应该为每一行创建一行吗?

r8n5n

这取决于您想要的行为。如果您连续有超过12列,它们将按原样缠绕到下一行

一行中超过12列将换行

<div class="row">
 <div class="small-2 large-4 columns">. . .</div>
 <div class="small-2 large-4 columns">. . .</div>
 <div class="small-2 large-4 columns">. . .</div>
 <div class="small-2 large-4 columns">. . .</div>
 <div class="small-2 large-4 columns">. . .</div>   
</div>

|  1 |  2 |  3  |  4  |  5  |  6  |  7  |  8  |  9  |  10 |  11 |  12 |

-----------------------------------------------------------------------
|                     |                       |                       |
|   div1              |      div2             |      div3             |    
|                     |                       |                       |
-----------------------------------------------------------------------
|                     |                       |
|   div4              |      div5             |
|                     |                       |
-----------------------------------------------

相当于2行

    <div class="row">
     <div class="small-2 large-4 columns">...</div>
     <div class="small-2 large-4 columns">...</div>
     <div class="small-2 large-4 columns">...</div>
   </div>
   <div class="row">
     <div class="small-2 large-4 columns">...</div>
     <div class="small-2 large-4 columns">...</div>
     <div class="small-2 large-4 columns">...</div>
   </div>

|  1 |  2 |  3  |  4  |  5  |  6  |  7  |  8  |  9  |  10 |  11 |  12 |

-----------------------------------------------------------------------
|                     |                       |                       |
|   div1              |      div2             |      div3             |  (row 1)
|                     |                       |                       |
-----------------------------------------------------------------------

-----------------------------------------------
|                     |                       |
|   div1              |      div2             |   (row 2)
|                     |                       |
-----------------------------------------------

在此处了解更多细节了解Foundation 4中的Div类

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Zurb Foundation Framework的Browserify

来自分类Dev

对Zurb Foundation的贡献入门

来自分类Dev

Zurb Foundation Framework的Browserify

来自分类Dev

ZURB Foundation 6的要求

来自分类Dev

在zurb Foundation网格中嵌套行

来自分类Dev

在zurb Foundation网格中嵌套行

来自分类Dev

ZURB基础和行倒塌

来自分类Dev

ZURB基础和行倒塌

来自分类Dev

Foundation Zurb-容器宽度?

来自分类Dev

Zurb Foundation的jQuery UI主题?

来自分类Dev

Zurb Foundation垂直导航栏?

来自分类Dev

如何设置Zurb Foundation图标?

来自分类Dev

Zurb Foundation Orbit:延迟加载?

来自分类Dev

Zurb Foundation更改顶部颜色

来自分类Dev

Zurb Foundation中的居中列表

来自分类Dev

Zurb Foundation 6原色变量

来自分类Dev

Zurb Foundation小柱不流动

来自分类Dev

Zurb Foundation中的居中列表

来自分类Dev

Foundation Zurb中的图像缩放

来自分类Dev

Zurb Foundation展示了Rails的模态

来自分类Dev

Foundation Zurb-容器宽度?

来自分类Dev

Zurb Foundation 5-行填充/边距

来自分类Dev

Zurb Foundation 6使用网格-列-行混合

来自分类Dev

Zurb Foundation:介质上的Topbar菜单按钮

来自分类Dev

如何手动安装Zurb Foundation?

来自分类Dev

Best practice for Laravel 4 + Zurb Foundation 5?

来自分类Dev

使用Zurb Foundation自动完成样式

来自分类Dev

Rails 4,Heroku,Zurb Foundation 5

来自分类Dev

Laravel 4 + Zurb Foundation 5的最佳实践?