栅格

示例

col-12
col-12
col-4
col-6
col-8
col-6
基本用法

Col嵌套在Row中,然后用span属性定义所占的宽度,宽度为百分比,每一份是1/24

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
col-12
col-12
col-4
col-6
col-8
col-6
间距

Row添加gutter,可以定义Col之间的间距,单位为px;如果要支持响应式,可以以对象的方式定义,如:{lg: 16, md: 4}

IE9不支持matchMedia,如果要使gutter在IE9下支持响应式,需要引入matchMedia polyfill@since v0.7.4 已经包含了matchMedia polyfill无需再次引入

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
col-6 offset-6
col-6 offset-6
col-6 gutter-16 offset-6
col-6 gutter-16 offset-6
偏移

Col添加offset属性可以使列相对本来的位置向右偏移相应的列数

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
1 col-18 push-6
2 col-6 push-18
排序

通过pullpush可以改变列的顺序

  1. pull 定义列距离右边界的栅格数
  2. push 定义列距离左边界的栅格数

通过pullpush排序可以有比较好的浏览器兼容性,当然如果你无需支持IE9及以下的浏览器,可以使用flex布局的order进行排序

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
居左 start
col-4
col-4
col-4
col-4
居右 end
col-4
col-4
col-4
col-4
居中 center
col-4
col-4
col-4
col-4
平均分布,顶边 between
col-4
col-4
col-4
col-4
平均分布,与边界的距离是两个子元素的一半 around
col-4
col-4
col-4
col-4
平均分布,间距(包括边界)相等 evenly
col-4
col-4
col-4
col-4
flex布局

Row添加justify属性,即可自动启用flex布局来定义Col水平方向的排列方式,它的可选值为:start end center between around evenly

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
顶端对齐 top
col-4
col-4
col-4
col-4
底部对齐 bottom
col-4
col-4
col-4
col-4
居中对齐 middle
col-4
col-4
col-4
col-4
撑开成容器高度 stretch
col-4
col-4
col-4
col-4
基线对齐 baseline
col-4
col-4
col-4
col-4
flex对齐

Row添加align属性,即可自动启用flex布局来定义Col垂直方向的排列方式,它的可选值为:top bottom middle stretch baseline

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
1 col-6 order-4
2 col-6 order-3
3 col-6 order-2
4 col-6 order-1
flex排序

Col添加order属性,即可自动启用flex布局来定义Col的顺序

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
指定每一个断点Col所占的栅格数
col
col
col
指定一个断点,当宽度小于该断点时,Col将以100%宽度纵向排列
col-md-18
col-md-8
同时指定多个属性
1 col
2 col
响应式布局

响应式布局参考bootstrap v4,分为6个等级:xs sm md lg xl xxl。你也可以以对象的方式指定多个属性(包括:span offset pull push order)的响应式,其中xs="2"等价于xs={{ {span: 2} }}

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)

属性

Row

属性 说明 类型 默认值
gutter 栅格间距,单位px;也可以以对象的方式指定响应式间距 Number | Object 0
justify 定义列水平方向布局,会自动启用flex布局 "start" | "end" | "center" | "between" | "around" | "evenly" undefined
align 定义列垂直方向布局,会自动启用flex布局 "top" | "bottom" | "middle" | "stretch" | "baseline" undefined
flex 是否强制启用flex布局 Boolean false

Col

属性 说明 类型 默认值
span 栅格所占宽度,可选值为0到24的整数 String | Number 24
offset 栅格左侧偏移量 String | Number 0
order 定义列的顺序,会自动启用flex布局 String | Number 0
pull 定义列距离右边界的栅格数 String | Number 0
push 定义列距离左边界的栅格数 String | Number 0
xs 响应式宽度 <576px String | Number | Object undefined
sm 响应式宽度 ≥576px String | Number | Object undefined
md 响应式宽度 ≥768px String | Number | Object undefined
lg 响应式宽度 ≥992px String | Number | Object undefined
xl 响应式宽度 ≥1200px String | Number | Object undefined
xxl 响应式宽度 ≥1600px String | Number | Object undefined