栅格布局的描述:
antdv官方文档介绍
布局的栅格化系统,基于行(row)和列(col)来定义信息区块的外部框架,以保证页面的每个区域能够稳健地排布起来
个人理解:类似于excel中的表格,一个一个的单元格可以进行合并,也可以进行拆分,
只不过antd每行最多24个格子,bootstrap为12个格子,通过栅格化的系统使布局更加简单,美观。
开发中的问题:
在日常的开发中,在不同的分辨率下,界面布局出现错行,原来在一行上的组件,在不同的分辨率下变成了多行。
原因分析:
造成的此问题原因主要有两个:
1、未正确使用栅格系统,在自己机器的分辨率下调整样式,例如:style=“margin-left:10px;”,造成在自己机器看着样式正常,分辨率发生变化后样式错乱
2、对栅格系统的不同分辨率划分,分辨率属性认知错误,antd栅格属性划分
xs <576px 响应式栅格,可为栅格数或一个包含其他属性的对象 number|object -
sm ≥576px 响应式栅格,可为栅格数或一个包含其他属性的对象 number|object -
md ≥768px 响应式栅格,可为栅格数或一个包含其他属性的对象 number|object -
lg ≥992px 响应式栅格,可为栅格数或一个包含其他属性的对象 number|object -
xl ≥1200px 响应式栅格,可为栅格数或一个包含其他属性的对象 number|object -
xxl ≥1600px 响应式栅格,可为栅格数或一个包含其他属性的对象 number|object -
解决方案:
1、在不同的分辨率下设置不同的栅格数,让显示正常,pc端基本在lg,xl属性正常即可,1024 * 768,1366 * 768分辨率下,1024使用lg属性,1366使用xl属性
2、尽量取消自定义的边距样式
3、调整row上的gutter属性,调整列间距