Grid 栅格
栅格布局的组件,提供 24 栅格, 参照 Bootstrap 的响应式设计。
包含下面组件:
<Grid>
<Row>
<Col>
对应屏幕宽度:
- xxl, extra-large: ≥
1400px
- xl, extra-large: ≥
1200px
- lg, large: ≥
992px
- md, medium: ≥
768px
- sm, small: ≥
576px
- xs, extra-small: <
576px
获取组件
import { Grid, Row, Col } from 'rsuite';
//or
import Grid from 'rsuite/Grid';
import Row from 'rsuite/Row';
import Col from 'rsuite/Col';
演示
默认
xs=2
xs=2
xs=2
xs=2
xs=2
xs=2
xs=2
xs=2
xs=2
xs=2
xs=2
xs=2
xs=4
xs=4
xs=4
xs=4
xs=4
xs=4
xs=8
xs=8
xs=8
xs=12
xs=12
响应式
xs=24 sm=24 md=8
xs=24 sm=24 md=8
xs=24 sm=24 md=8
sm=24 md=8
sm=12 md=6 lg=12
sm=12 md=8
lg=6 xl=8 xxl=6
lg=12 xl=6 xxl=12
lg=6 xl=8 xxl=6
栅格间隔
xs=4
xs=4
xs=4
xs=4
xs=4
xs=4
偏移
xs=4 xsOffset=20
xs=8 xsOffset=16
xs=12 xsOffset=12
xs=16 xsOffset=8
xs=20 xsOffset=4
栅格推拉
xs=12 xsPush=12 `left`
xs=12 xsPull=12 `right`
xs=6 `left`
xs=6 xsPush=12 `right`
xs=6 xsPush=18 `left`
xs=6 xsPull=6 `right`
隐藏栅格
xsHidden xs=12
xs=12 xs=12
嵌套
xs=12
xs=12
xs=12
xs=12
xs=12
xs=12
xs=12
xs=12
Props
<Grid>
属性名称 | 类型(默认值) |
描述 |
---|---|---|
as | ElementType ('div') |
为组件自定义元素类型 |
fluid | boolean | 流体布局, (100% 宽度) |
<Row>
属性名称 | 类型(默认值) |
描述 |
---|---|---|
as | ElementType ('div') |
为组件自定义元素类型 |
gutter | number | 栅格的间距 |
<Col>
属性名称 | 类型(默认值) |
描述 |
---|---|---|
as | ElementType ('div') |
为组件自定义元素类型 |
xxl | number | ≥ 1400px 响应式栅格 |
xxlHidden | boolean | 隐藏栅格 |
xxlOffset | number | 栅格左侧的间隔格数,间隔内不可以有栅格 |
xxlPull | number | 栅格向左移动格数 |
xxlPush | number | 栅格向右移动格数 |
xl | number | ≥ 1200px 响应式栅格 |
xlHidden | boolean | 隐藏栅格 |
xlOffset | number | 栅格左侧的间隔格数,间隔内不可以有栅格 |
xlPull | number | 栅格向左移动格数 |
xlPush | number | 栅格向右移动格数 |
lg | number | ≥ 992px 响应式栅格 |
lgHidden | boolean | 隐藏栅格 |
lgOffset | number | 栅格左侧的间隔格数,间隔内不可以有栅格 |
lgPull | number | 栅格向左移动格数 |
lgPush | number | 栅格向右移动格数 |
md | number | ≥ 768px 响应式栅格 |
mdHidden | boolean | 隐藏栅格 |
mdOffset | number | 栅格左侧的间隔格数,间隔内不可以有栅格 |
mdPull | number | 栅格向左移动格数 |
mdPush | number | 栅格向右移动格数 |
sm | number | ≥ 576px 响应式栅格 |
smHidden | boolean | 隐藏栅格 |
smOffset | number | 栅格左侧的间隔格数,间隔内不可以有栅格 |
smPull | number | 栅格向左移动格数 |
smPush | number | 栅格向右移动格数 |
xs | number | < 576px 响应式栅格 |
xsHidden | boolean | 隐藏栅格 |
xsOffset | number | 栅格左侧的间隔格数,间隔内不可以有栅格 |
xsPull | number | 栅格向左移动格数 |
xsPush | number | 栅格向右移动格数 |