antd中form表单的wrapperCol和labelCol问题详解
之前在学这块时候比较模糊 有点不熟 以至于在后来的开发过程中看别人的代码中的xs sm等 以及{span：8}也表示困惑
但也不敢问大佬（怕因为太简单而被嘲讽），只能自己去百度去了解，总算是有些眉目，到现在觉得可能有些小伙伴和我当初一样比较困惑，希望这个能对和我一样模糊的小伙伴有帮助，也方便自己随时查看
labelCol：表示当前label在整行的占比，就是下图红色框框部分
wrapperCol：表示当前输入框在整行的占比 就是下图黄色框框部分
1.首先就是对xs sm等的解释 ，这相当于响应式布局一样 当分辨率小于多少就应用该对象，大部分情况下只需要使用xs和sm即可 ，特殊需要再加上其他分辨率，相当于移动端和PC端。
注意！！！总共是24份 span后面数字是几就是几份 不存在约分 6：18 不等于 1：3
而且！！labelCol和wrapperCol是成套使用的，在相同分辨率下两者的内容是对应的
举个例子
const formItemLayout = {
//这是label的占比份数，span表示份
labelCol: {
xs: { span: 24 }, //这个就是当前分辨率小于576px时候运用的比例
sm: { span: 8 } //这个就是当前分辨率大于576px时候运用的比例
},
//这个是输入框的占比份数
wrapperCol: {
xs: { span: 24 }, //这个就是当前分辨率小于576px时候运用的比例
sm: { span: 16 } //这个就是当前分辨率大于576px时候运用的比例
}
};
除了span 还有offset 他就是偏移量 是当前组件相对一行的头所偏移的距离，也就是如果当offset为4，那么整体就往右偏移了四份，代码例子代码例子
除了前两个span和offset属性外 还有一个 gutter，他就是row元素的间隙，比如gutter是20 则代表在他们中间的间隙为20，也就是绿色箭头所指的区域
const formItemLayout = {
labelCol: {
sm: { span: 6 ，offset：4 } //偏移4份
},
wrapperCol: {
sm: { span: 12 } //相较于前个例子 span变为了12份，因为总份数是24份
}
};
最后，希望能帮助到对这块和我曾经一样比较模糊的小伙伴
总结
到此这篇关于antd中form表单的wrapperCol和labelCol问题详解的文章就介绍到这了,更多相关antd form表单wrapperCol和labelCol内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了React构建简洁强大可扩展的前端项目架构实现，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
React知识中一个主要内容便是组件之间的通信，以下列举几种常用的组件通信方式，本文就详细的介绍一下，感兴趣的可以了解一下2021-10-10
这篇文章主要介绍了react组件实例属性state,有状态state的组件称作复杂组件,没有状态的组件称为简单组件，状态里存储数据,数据的改变驱动页面的展示，本文结合实例代码给大家详细讲解，需要的朋友可以参考下2023-03-03
这篇文章主要介绍了react-router6.x路由配置及导航,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
要实现useState的背后原理,则需要深入了解状态是如何在函数组件的渲染周期中保持和更新的,本文将通过一段代码简单阐述useState钩子函数的实现思路,希望对大家有所帮助2023-12-12
本文主要介绍了React 性能优化之非必要的渲染问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要介绍了解决React Native端口号修改的方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了通过实例学习React中事件节流防抖，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了React Antd中如何设置表单只输入数字问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
react-router-dom v6版本实现Tabs路由缓存切换功能
今天有人问我怎么实现React-Router-dom类似标签页缓存,很久以前用的是react-router v5那个比较容易实现,v6变化挺大,但了解react的机制和react-router的机制就容易了,本文介绍react-router-dom v6版本实现Tabs路由缓存切换,感兴趣的朋友一起看看吧2023-10-10
最新评论