如何在 React-Bootstrap 中放置内联无线电控件？

Question

我正在使用 React-Bootstrap 和 Typescript 编写个人 Electron 项目，但我无法将两个无线电控件并排放置。我关注了 the React-Bootstrap examples 但它不起作用。我不确定这是否只是我，或者我是否遗漏了什么。我还尝试将内联道具提供给 Form 组件，并在没有 Container 和 Row 组件的情况下编写它。我知道可以在 Bootstrap 中使用 flex 结构来完成，但我宁愿只使用 React-Bootstrap 组件。

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;

Answer 1

我错过了从 Bootstrap:

导入的 .css

import 'bootstrap/dist/css/bootstrap.min.css';

起初我忽略了它，因为由于我的 webpack 配置文件中缺少一些配置，我无法编译它。但经过一些挖掘，我发现 关于如何将 Bootstrap 样式表添加到 App.tsx 组件。