Grid 栅格
最基础的列表展示，可承载文字、列表、图片、段落。常用语后台数据展示页面。 API文档 组件问题反馈和讨论使用方法
栅格使用时候必须建立在行(row)与列(col)基础上，这样就能正常使用栅格系统
- 栅格通过row建立一组布局
- 内容放置在col内，并且其父层就是row
- 栅格数值按照1—24，一行数量总和为24，超出则另起一行
设计思路 #
经过实践，Nv重新设计栅格，在原来的12个栅格拓展到24个栅格，更能适应更多应用场景。建议横向排列的栅格单位最多4个，最少一个。栅格布局如上图所示。
<code>
nv-col-24（100%）
nv-col-12 (50%)
nv-col-12 (50%)
nv-col-16 (66.66%)
nv-col-8 (33.33%)
nv-col-6 (25%)
nv-col-6 (25%)
nv-col-6 (25%)
nv-col-6 (25%)
nv-col-8 (33.33%)
nv-col-8 (33.33%)
nv-col-8 (33.33%)
基础栅格 #
使用单一的一组row与col栅格，列（col）必须在行中（row）nv-col-12
nv-col-12
nv-col-6
nv-col-6
nv-col-6
nv-col-6
nv-col-8
nv-col-8
nv-col-8
间隔布局#
间隔布局需要在在nv-row的样式上添加nv-row-spacenv-col-6
nv-col-6
nv-col-6
nv-col-6
栅格偏移 #
栅格中需要间隔布局，在 nv-col 中增加 nv-col-offset-x 即可nv-col-offset-3
nv-col-offset-6
Flex布局 #
其实用flex布局就是直接替换掉样式 nv-row 为 nv-row-flex 即可。如果有其他布局需求就可以使用以下附带属性居左
nv-col-4
nv-col-4
nv-col-4
nv-col-4
居中
nv-col-4
nv-col-4
nv-col-4
nv-col-4
居右
nv-col-4
nv-col-4
nv-col-4
nv-col-4
两边对齐
nv-col-4
nv-col-4
nv-col-4
nv-col-4
左右均等对齐
nv-col-4
nv-col-4
nv-col-4
nv-col-4
Flex对齐 #
垂直布局同横向布局，在flex基础上增加额外样式即可， nv-row-flex-top ， nv-row-flex-middle ， nv-row-flex-end垂直顶部
nv-col-4
nv-col-4
nv-col-4
nv-col-4
垂直居中
nv-col-4
nv-col-4
nv-col-4
nv-col-4
垂直底部
nv-col-4
nv-col-4
nv-col-4
nv-col-4
Flex单元格垂直位置 #
垂直布局可以单独控制一个单元格的位置，非常好用，分别为： nv-col-flex-top ， nv-col-flex-middle ， nv-col-flex-bottom ，与行内撑满高度样式： nv-col-flex-stretch居上 (nv-col-flex-top)
nv-col-4
nv-col-4
nv-col-4
nv-col-4
居中 (nv-col-flex-middle)
nv-col-4
nv-col-4
nv-col-4
nv-col-4
底部 (nv-col-flex-bottom)
nv-col-4
nv-col-4
nv-col-4
nv-col-4
垂直占满 (nv-col-flex-stretch)
nv-col-4
nv-col-4
nv-col-4
nv-col-4
Flex排序: #
flex排序是根据1—24序号顺序进行排序， nv-col-flex-order-1 至 nv-col-flex-order-24排序前
元素第1个
元素第2个
元素第3个
元素第4个
排序后
元素第1个
元素第2个
元素第3个
元素第4个
排序前
元素第1个
元素第2个
元素第3个
元素第4个
排序后
元素第1个
元素第2个
元素第3个
元素第4个
响应式布局: #
参照了BootStrap的响应式设计，Nv预设了五个相应尺寸：手机尺寸： nv-col-xs-?
平板尺寸： nv-col-sm-?
桌面显示器尺寸： nv-col-md-?
大桌面显示器尺寸： nv-col-lg-?
大屏慕显示器尺寸： nv-col-xl-?
1
2
3