antd form表单文本标签右对齐的

news2024/12/29 9:36:13

实现代码如下: 

const formItemLayout = {
    labelCol: { // 表示当前label在整行的占比
        xs: { span: 12 },
        sm: { span: 9},
    },
    wrapperCol: { // 表示当前输入框在整行的占比
        xs: { span: 12 },
        sm: { span: 15 },
    },
};


<Form
    name="advanced_search"
    className="ant-advanced-search-form"
    onFinish={this.onFinish}
    {...formItemLayout}
>

formItemLayout 中的labelCol和wrapperCol同样的尺寸大小(如xs)加在一起是antd的栅格系统共24份。labelCol表示当前label文本标签在整行的占比,wrapperCol表示当前输入框在整行中的占比。

通过调整labelCol和wrapperCol为合适的值即可使form表单的文本标签右对齐。

关于尺寸的选择,可以参看栅格 Grid - Ant Design

 xs:屏幕 < 576px 响应式栅格;
sm:屏幕 ≥ 576px 响应式栅格;
md:屏幕 ≥ 768px 响应式栅格;
  lg:屏幕 ≥ 992px 响应式栅格;
  xl:屏幕 ≥ 1200px 响应式栅格;
xxl:屏幕 ≥ 1600px 响应式栅格。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/824792.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

有哪些常见的微信小程序推广引流方法?

如何对小程序进行推广引流。只有如此&#xff0c;才能为小程序获取到更多忠实用户&#xff0c;使小程序实现更大的价值。今天就为大家介绍一下微信小程序常见有效的推广方式。 1、附近的小程序&#xff08;免费&#xff09; 在小程序后台&#xff0c;开通“附近的小程序”&am…

微服务实战项目-学成在线-选课学习(支付与学习中心)模块

微服务实战项目-学成在线-选课学习(支付与学习中心)模块 1 模块需求分析 1.1 模块介绍 本模块实现了学生选课、下单支付、学习的整体流程。 网站的课程有免费和收费两种&#xff0c;对于免费课程学生选课后可直接学习&#xff0c;对于收费课程学生需要下单且支付成功方可选…

(4)(4.4) 使用测试版和开发版

文章目录 4.4 使用测试版和开发版 4.4.1 测试版 4.4.2 最新开发版本 4.4.3 自定义固件构建服务器 4.4.4 固件的局限性 4.5 测试 4.4 使用测试版和开发版 4.4.1 测试版 在稳定版(Stable)发布之前&#xff0c;会发布测试版(Beta)。如果你想尝试较新的功能或帮助开发人员飞行…

HashMap 是怎么解决哈希冲突的

从三方面思考这个问题 1.要了解 Hash 冲突&#xff0c;那首先我们要先了解 Hash 算法和 Hash 表。&#xff08;如下图&#xff09; Hash 算法&#xff0c;就是把任意长度的输入&#xff0c;通过散列算法&#xff0c;变成固定长度的输出&#xff0c; 这个输出结果是散列值。 H…

学生护眼灯哪种好?分享眼科医生推荐的台灯

据统计&#xff0c;我国青少年近视率已位居世界第一&#xff0c;高中生和大学生的近视率均已超过68.8%且还在上升&#xff0c;就连小学生的近视率也接近40%&#xff01;繁重的学习任务是主要因素&#xff0c;再加上下课后手机平板等电子产品使用的影响下&#xff0c;近视可能性…

MySQL数据备份与还原

一、数据备份 1、使用mysqldump命令备份 mysqldump命令将数据库中的数据备份成一个文本文件。表的结构和表中的数据将存储在生成的文本文件中。 mysqldump命令的工作原理很简单。它先查出需要备份的表的结构&#xff0c;再在文本文件中生成一个CREATE语句。然后&#xff0c;将表…

redis的数据类型及操作

三、redis的数据类型 String字符串 set、get mset setex setnx 会检测键值对存不存在&#xff0c;如果存在不发生变化&#xff0c;如果存在则增加键值对 只增加 而set会覆盖原来的值 增加、修改 setrange 有下标则替换&#xff0c;没有则添加 getrange 获取全…

利用GRACE和地表质量模型计算地球弹性负荷变形实验笔记

1.背景和意义 由于地球的弹性结构&#xff0c;地球大尺度的质量迁移会导致地球产生负荷变形。地球的环境负载如大气、海洋、陆地水等的变化会使得固体地球产生明显的位移变化&#xff0c;为了准确研究有关地球物理信号&#xff0c;需要对弹性的负荷变形进行有效计算并扣除。通…

华云安参编的《云原生安全配置基线规范》正式发布

由中国信息通信研究院&#xff08;以下简称“中国信通院”&#xff09;、中国通信标准化协会主办的第十届可信云大会云原生安全分论坛于7月26日在北京国际会议中心成功召开。作为大会上展示的成果之一&#xff0c;由中国信通院联合行业领先企业共同编写的《云原生安全配置基线规…

项目管理:项目计划有哪些不可忽视的作用

为了确保项目在我们的预期范围内完成&#xff0c;编制计划是不可或缺的&#xff0c;它可以帮助项目管理团队进行提前思考、识别和管理任何疏漏和风险。 项目计划进行跟踪中有哪些不可忽视的作用&#xff1a; 1、了解成员的工作情况 分配任务后&#xff0c;项目经理应主动与…

STL string

文章目录 一、编码二、标准库中 string 类的使用1. 构造函数和拷贝构造函数2. 迭代器相关的成员函数3. 容量相关的成员函数4. 访问对象内容相关的成员函数5. 修改对象内容相关的成员函数6. 字符串操作相关的成员函数7. sting 类相关的非成员函数 三、vs 和 g 下 string 的结构四…

【Git】分支管理策略

文章目录 分支策略bug分支-master分支出现bug怎么办删除临时分⽀小结 分支策略 在实际开发中&#xff0c;我们应该按照⼏个基本原则进⾏分⽀管理&#xff1a; 1.master分⽀应该是⾮常稳定的&#xff0c;也就是仅⽤来发布新版本&#xff0c;平时不能在上⾯⼲活 2.⼲活都在dev…

echarts图表基本使用

折线图 import * as echarts from echarts;const chartDom document.getElementById(main); const myChart echarts.init(chartDom); const option {xAxis: {type: category,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]},yAxis: {type: value},series: [{data: [820, 932, …

【MySQL】下载安装以及SQL介绍

1&#xff0c;数据库相关概念 以前我们做系统&#xff0c;数据持久化的存储采用的是文件存储。存储到文件中可以达到系统关闭数据不会丢失的效果&#xff0c;当然文件存储也有它的弊端。 假设在文件中存储以下的数据&#xff1a; 姓名 年龄 性别 住址 张三 23 男 北京…

【MySQL】DDL和DML

4&#xff0c;DDL:操作数据库 我们先来学习DDL来操作数据库。而操作数据库主要就是对数据库的增删查操作。 4.1 查询 查询所有的数据库 SHOW DATABASES; 运行上面语句效果如下&#xff1a; 上述查询到的是的这些数据库是mysql安装好自带的数据库&#xff0c;我们以后不要操…

树莓派 PICO配置教程-hello world,基础教程,如何配置树莓派pico,raspberry pico(基于MicroPython)

1 树莓派 PICO 简介 1.1 简介 Raspberry Pi Pico是具有灵活数字接口的低成本&#xff0c;高性能微控制器板。它集成了Raspberry Pi自己的RP2040微控制器芯片&#xff0c;运行速度高达133 MHz的双核Arm Cortex M0 处理器&#xff0c;嵌入式264KB SRAM和2MB板载闪存以及26个多功…

uniapp小程序console.log在微信开发者工具中不打印问题

最近在开发一款uniapp小程序&#xff0c;发现console.log在微信开发者工具中不打印&#xff0c;但在H5页面就能够有打印输出&#xff0c;于是在网上寻找原因… 主要是由于vue.config.js文件中有设置发布时删除console的配置&#xff0c;如下&#xff1a; 官网参考地址&#x…

涛思数据与拾贝云达成战略合作,携手赋能工业数字化转型

2023 年 7 月 27 日&#xff0c;北京涛思数据科技有限公司&#xff08;以下简称“涛思数据”&#xff09;与广州拾贝云科技有限公司&#xff08;以下简称“拾贝云”&#xff09;于广州签署战略合作协议。双方围绕电力行业的需求与痛点展开积极讨论&#xff0c;就如何量身打造最…

3分钟白话RocketMQ系列—— 核心概念

白话3分钟&#xff0c;快速了解RocketMQ基础&#xff0c;包括适用场景&#xff0c;以及基本概念。 看完如果不了解&#xff0c;欢迎来打我。 关键字摘要 低延迟、高可用、高可靠、高并发 的消息中间件适合在线业务分为producer、consumer、nameserver、broker等角色另外还有主…

第一次创建OBBH、OB28如何关联到程序ZGGBS000、ZGGBR000

如果做替代OBBH、校验OB28网上有很多的资料&#xff0c;我就不多说了。 但是对于某项目、服务器第一做OBBH、OB28时&#xff0c;我们将程序RGGBS000、RGGBR000复制成ZGGBS000、ZGGBR000后&#xff0c;如何将OBBH、OB28与我们的程序ZGGBS000、ZGGBR000关联呢&#xff1f; 用SM…