首页 > 解决方案 > 如何在 React-Bootstrap 中放置内联无线电控件?

问题描述

我正在使用 React-Bootstrap 和 Typescript 编写一个个人电子项目,但我不能将两个无线电控件放在一起。我遵循了 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;

标签: cssreactjsbootstrap-4electronreact-bootstrap

解决方案


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

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

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


推荐阅读