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

Question

我正在使用 React-Bootstrap 和 Typescript 编写一个个人 Electron 项目，但我不能将两个无线电控件放在一起。 我遵循了 React-Bootstrap 示例，但它不起作用。 我不确定这只是我还是我错过了什么。 我还尝试将内联道具提供给 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 组件的这个很好的答案。