Css React-Ant设计-将表单项拆分为两列

我是Ant Design的新手，希望将表单组件中的表单项拆分为页面上的两列。我试过flex box，但它不起作用

正如您在我的代码中从他们的文档中看到的那样，有一个“formItemLayout”函数，但没有关于它的详细信息。我不知道我是否能用它来分割他们

有没有办法让他们在页面上垂直分成两部分（比如分成两列，每列占页面的50%）

任何帮助都将不胜感激

import React from "react";

import { Form, Select, InputNumber, Input, Button, Upload, Space } from "antd";

import { UploadOutlined } from "@ant-design/icons";

const { Option } = Select;

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 5,
  },
};

const normFile = (e) => {
  console.log("Upload event:", e);

  if (Array.isArray(e)) {
    return e;
  }

  return e && e.fileList;
};

const NewDevicePage = () => {
  const onFinish = (values) => {
    console.log("Received values of form: ", values);
  };

  return (
<div className="fnew-device-page-wrapper">
        <Form name="new-device-form" {...formItemLayout} onFinish={onFinish} hideRequiredMark >
          <Form.Item
            name={["user", "name"]}
            label="Name"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item name={["user", "url"]} label="URL">
            <Input />
          </Form.Item>

          <Form.Item
            name="type"
            label="Type"
            hasFeedback
            rules={[
              {
                required: true,
                message: "Please select the type of your device!",
              },
            ]}
          >
            <Select placeholder="Producer">
              <Option value="producer"> Producer </Option>
              <Option value="consumer"> Consumer </Option>
            </Select>
          </Form.Item>

          <Form.Item label="Price">
            <Form.Item name="price" noStyle>
              <InputNumber min={0} />
            </Form.Item>
          </Form.Item>

          <Form.Item label="Min balance">
            <Form.Item name="min-balance" noStyle>
              <InputNumber min={0} />
            </Form.Item>
          </Form.Item>

          <Form.Item
            name="device-image"
            label="Device image"
            valuePropName="fileList"
            getValueFromEvent={normFile}
            extra="No file selected"
          >
            <Upload name="logo" action="/upload.do" listType="picture">
              <Button>
                <UploadOutlined /> Select file
              </Button>
            </Upload>
          </Form.Item>

          <Form.Item name={["user", "location"]} label="Location">
            <Input />
          </Form.Item>

          <Form.Item
            name="network"
            label="Network"
            hasFeedback
            rules={[
              {
                required: true,
                message: "Please select the Network",
              },
            ]}
          >
            <Select placeholder="net1">
              <Option value="net1"> Network 1 </Option>
              <Option value="net2"> Network 2 </Option>
            </Select>
          </Form.Item>

          <Form.Item label="Minimum amount">
            <Form.Item name="min-offer-amount" noStyle>
              <InputNumber min={0} />
            </Form.Item>
          </Form.Item>

          <Form.Item
            wrapperCol={{
              span: 12,
              offset: 6,
            }}
          >
            <Button shape="round" type="primary" htmlType="submit">
              Add a device
            </Button>

            <Button shape="round" danger>
              Cancel
            </Button>
          </Form.Item>
        </Form>
      </div>
);
};

export default NewDevicePage;

从“React”导入React；
从“antd”导入{Form，Select，InputNumber，Input，Button，Upload，Space}；
从“@ant design/icons”导入{UploadOutlined}”；
const{Option}=Select；
常量formItemLayout={
labelCol：{
跨度：6，
},
包装纸：{
跨度：5，
},
};
常量文件=（e）=>{
日志（“上传事件：”，e）；
if（数组isArray（e））{
返回e；
}
返回e&e.fileList；
};
const NewDevicePage=（）=>{
常量onFinish=（值）=>{
log（“接收到的值的形式：”，值）；
};
返回(
制作人
消费者
选择文件
网络1
网络2
添加设备
取消
);
};
导出默认NewDevicePage；

我已经用问题中提供的表单组件创建了这个。虽然这在UX方面没有很好的格式化，但它将帮助您根据需要将表单元素格式化为两列。请看一看

我使用了

antd

提供的

行

，

列

，将表单项格式化为两列

---

希望这能有所帮助。

成功了！如果我能在这里给你任何奖励，我早就这么做了！非常感谢。哈哈。谢谢你：）。我真的很高兴它帮了我的忙，因为我以前不知道

antd

。请看一下这个

Gauge

chart在

chart.js

中默认不可用，因此为此，我添加了另一个名为

chartjs Gauge

的依赖项。希望这是你正在寻找的，只是让你知道，你的示例应用程序帮了我很多，与很多东西斗争，你的示例应用程序简单而强大！很高兴帮助您@user5109293123:）