栅格布局的描述:

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属性,调整列间距

Logo

前往低代码交流专区

更多推荐