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

每一天，每一步2023-08-02 11:57

实现代码如下：

javascript 复制代码

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 响应式栅格。