Currently, I am delving into learning react and antd by putting it into practice. My goal is to create a layout with a button and two input fields that have a 10px gap between them, while also displaying the titles of each field directly above them. To achieve this layout, I am utilizing the Row and Col components from antd. However, I seem to be encountering an issue where the fields are overlapping each other. Below is my implementation:
<Row className="mt-2" gutter={24}>
<Col sm={4} >
<span>Upload</span>
</Col>
<Col sm={7}>
<span>File Name</span>
</Col>
<Col sm={5}>
<span>File Path</span>
</Col>
</Row>
<Row className="mt-2" gutter={24}>
<Col sm={4}>
<Upload maxCount={1} showUploadList={false} beforeUpload={() => false} >
<Button type='primary'>Upload</Button>
</Upload>
</Col>
<Col sm={7}>
<input style={{height: "40px", width: "400px"}} disabled={true}></input>
</Col>
<Col sm={5}>
<input style={{height: "40px", width: "300px"}} ></input>
</Col>
</Row>
I have provided a visual reference for how the spacing should be laid out. Despite my efforts, the alignment of the fields does not meet my expectations when running the code. I suspect that the issue lies within the 'sm' field, but I am uncertain. Can you confirm if the Col component will properly handle the spacing between fields, especially since I am not utilizing the full width of the screen? https://i.sstatic.net/2BOUz.png