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 | 栅格向右移动格数 |