reactjs - 如何在 Reactjs 和引导表单中并排放置标签和输入字段

Question

我已经使用带有引导程序的 Reactjs 来生成表单，但是我不能并排放置标签和输入字段。

我只希望他们并排而不是在彼此之下。

这是我的代码：

    const firstComponent = () => {
  return (
    <Form className="column justify-content-center page">
      <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
        <Form.Label>Benzersiz Ad</Form.Label>
        <Form.Control as="textarea" rows={3} />
      </Form.Group>
      <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
        <Form.Label>Görünen İsim</Form.Label>
        <Form.Control as="textarea" rows={3} />
      </Form.Group>
      <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
        <Form.Label>Oyun Açıklaması</Form.Label>
        <Form.Control as="textarea" rows={3} />
      </Form.Group>
      <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
        <Form.Label>Oyun Türü</Form.Label>
        <Form.Control as="textarea" rows={3} />
      </Form.Group>
      <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
        <Form.Label>Bireysel</Form.Label>
        <Form.Control as="textarea" rows={3} />
      </Form.Group>
      <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
        <Form.Label>Oyun Durumu</Form.Label>
        <Form.Control as="textarea" rows={3} />
      </Form.Group>
      <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
        <Form.Label>Açık</Form.Label>
        <Form.Control as="textarea" rows={3} />
      </Form.Group>
    </Form>
  );
};

export default firstComponent

但是，我尝试在不同的工作表中设置它的样式但无法应用，我也尝试了内联样式但它不起作用

欢迎任何帮助！

标签： reactjsbootstrap-4