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

【问题标题】：How can I put inline radio controls in React-Bootstrap?如何在 React-Bootstrap 中放置内联无线电控件？
【发布时间】：2021-04-12 22:00:51
【问题描述】：

我正在使用 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;

【问题讨论】：

标签： css reactjs bootstrap-4 electron react-bootstrap

【解决方案1】：

我错过了从 Bootstrap 导入的 .css：

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

起初我忽略了它，因为我的 webpack 配置文件中缺少一些配置，我无法编译它。但经过一番挖掘后，我找到了this great answer，了解如何将 Bootstrap 样式表添加到 App.tsx 组件中。

【讨论】：