如何使用 React 和 Bootstrap 将 JSX 组件在网页上左对齐？

Question

我目前正在开发一个 React 项目，我使用 Bootstrap 来设计我的组件。我有一个 JSX 组件，我想将其与网页左侧对齐，但由于某种原因，它不起作用。这是我当前的组件：

import React from 'react';
import Form from 'react-bootstrap/Form';
import './Formular.css';

function Formular() {
  return (
    <Form>
      <Form.Group className="mb-3" controlId="First Name">
        <Form.Control type="text" placeholder="First Name*" />
      </Form.Group>
      <Form.Group className="mb-3" controlId="Last Name">
        <Form.Control type="text" placeholder="Last Name*" />
      </Form.Group>
      <Form.Group className="mb-3" controlId="University">
        <Form.Control type="text" placeholder="University*" />
      </Form.Group>
      <Form.Group className="mb-3" controlId="Major">
        <Form.Control type="text" placeholder="Major*" />
      </Form.Group>
      <Form.Group className="mb-3" controlId="Date of Birth">
        <Form.Label>Please enter your date of birth:</Form.Label>
        <Form.Control type="date" placeholder="Date of Birth (dd.mm.yyyy)*" />
      </Form.Group>
    </Form>
  );
}

export default Formular;

在我的 Formular.css 文件中，我添加了以下代码：

Form {
  text-align: left;
}

尽管如此，该组件在网页上并未显示为左对齐。任何人都可以提供有关如何修改此 JSX 组件以实现左对齐的指导吗？

提前谢谢您！

Answer 1

simply do this,  Form {

margin-right：自动； }