如何使用React与Bootstrap实现JSX组件网页左对齐？

我正在开发一个使用Bootstrap进行样式设计的React项目，需要将一个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组件以实现左对齐效果？

核心问题有两点：一是CSS选择器错误，React-Bootstrap的Form组件最终渲染为HTML原生<form>标签，你写的Form不是有效的CSS选择器；二是Bootstrap默认样式可能存在容器居中或控件宽度的约束，仅设置text-align不足以生效。以下是几种可行方案：

方案1：修正CSS选择器并调整布局 #

修改Formular.css内容：

/* 针对渲染后的原生form标签设置样式 */
form {
  text-align: left;
  margin-left: 0; /* 抵消父容器可能存在的自动居中边距 */
  max-width: 600px; /* 可选，限制表单最大宽度，避免过宽 */
}

/* 确保表单标签左对齐 */
.form-label {
  text-align: left;
}

方案2：给Form组件添加自定义类名（推荐） #

先在JSX中给Form组件添加自定义类：

<Form className="left-aligned-form">
  {/* 原有表单内容保持不变 */}
</Form>

然后在Formular.css中编写对应样式：

.left-aligned-form {
  text-align: left;
  margin-left: 0;
  width: 100%; /* 根据需求调整宽度 */
}

.left-aligned-form .form-control {
  text-align: left; /* 确保输入框内文字左对齐 */
}

方案3：直接使用Bootstrap内置类 #

Bootstrap提供了现成的文本对齐类text-start，可以直接添加到Form组件上：

<Form className="text-start">
  {/* 原有表单内容不变 */}
</Form>

如果表单被包裹在container或row这类Bootstrap布局容器中，还可以搭配justify-content-start类调整容器的Flex布局对齐：

<div className="container justify-content-start">
  <Form className="text-start">
    {/* 表单内容 */}
  </Form>
</div>

内容的提问来源于stack exchange，提问作者RighteousRocks