Currently, I am working on my personal project using Electron, React-Bootstrap, and Typescript. However, I am facing an issue with placing two radio controls next to each other. Despite following the examples from React-Bootstrap, I have not been successful in getting it to work. I have tried adding inline props to the Form component, as well as experimenting without using the Container and Row components. While I know that adjusting the flex structure in Bootstrap may solve this issue, I prefer utilizing only the React-Bootstrap components.
import React from 'react';
import { Container, Row, Form } from 'react-bootstrap';
const ExperimentTypeForm = () => {
return (
<Container fluid>
<Row>
<Form>
<div key="inline-radio" className="mb-3">
<Form.Check inline label="1" type="radio" id="inline-radio-1" />
<Form.Check inline label="2" type="radio" id="inline-radio-2" />
</div>
</Form>
</Row>
</Container>
)
}
export default ExperimentTypeForm;