一、通过栅格布局

使用单一的一组 Row 和 Col 栅格组件,创建一个基本的栅格系统

<Row gutter={16}>
  <Col span={8}>
    <Item name="A">
      <InputNumber style={{ width: 80 }} placeholder="Min" disabled={_disabled} />
    </Item>
  </Col>
  <Col span={8}>
    <Item name="B">
      <InputNumber style={{ width: 80 }} placeholder="Max" disabled={_disabled} />
    </Item>
  </Col>
</Row>;

在这里插入图片描述

二、layout 表单布局

layout 有三个可选值 horizontal(水平) | vertical(垂直) | inline(内联)
layout=“inline” 内联登录栏

<Form form={form} name="horizontal_login" layout="inline" onFinish={onFinish}>
  <Form.Item name="username" rules={[{ required: true, message: 'Please input your username!' }]}>
    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
  </Form.Item>
  <Form.Item name="password" rules={[{ required: true, message: 'Please input your password!' }]}>
    <Input
      prefix={<LockOutlined className="site-form-item-icon" />}
      type="password"
      placeholder="Password"
    />
  </Form.Item>
  <Form.Item shouldUpdate>
    {() => (
      <Button
        type="primary"
        htmlType="submit"
        disabled={
          !form.isFieldsTouched(true) ||
          !!form.getFieldsError().filter(({ errors }) => errors.length).length
        }
      >
        Log in
      </Button>
    )}
  </Form.Item>
</Form>;

在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐