React-boostrap表单字段并排呈现，而不是一个在另一个下方呈现

import React from 'react';
import { Form, Row, Col } from 'react-bootstrap';

const MyForm = () => {
  return (
    <Form>
      <Row className="mb-3">
        <Col xs={12} md={6}>
          <Form.Group controlId="formBasicEmail">
            <Form.Label>Email address</Form.Label>
            <Form.Control type="email" placeholder="Enter email" />
          </Form.Group>
        </Col>
        <Col xs={12} md={6}>
          <Form.Group controlId="formBasicPassword">
            <Form.Label>Password</Form.Label>
            <Form.Control type="password" placeholder="Password" />
          </Form.Group>
        </Col>
      </Row>
    </Form>
  );
};

export default MyForm;

<Row className="mb-3">
  <Col xs={12} md={6}>
    {/* 第一个表单字段 */}
  </Col>
  <Col xs={12} md={6}>
    {/* 第二个表单字段 */}
  </Col>
</Row>