ant design中的栅格化系统


antd design在原12栅格系统的基础上,将整个设计区域进行24等分,Row代表行,Col代表列

通过Row的gutter属性设置Col与Col之间的间隔,响应式设置 { xs:8,sm:16,md:24,lg:32}

将内容放在Col中,只有Col可以作为Row的直接元素,将每个Row(每行)平均分成24份,在每个Col中通过span={}或响应式进行圈地

如果一个Row中的Col的总和超过24,超出的的Col会作为一个整体另起一行排列

<Row gutter={{ xs:8,sm:16,md:24 }}>

  <Col sm={12} md={8} lg={6} xl={6}></Col>

  <Col sm={12} md={8} lg={6} xl={6}></Col>

  <Col sm={12} md={8} lg={6} xl={6}></Col>

  <Col sm={12} md={8} lg={6} xl={6}></Col>

</Row>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM