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';

演示

默认

响应式

栅格间隔

偏移

栅格推拉

隐藏栅格

嵌套

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