css - 如何在 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;
解决方案
我错过了从 Bootstrap 导入的 .css:
import 'bootstrap/dist/css/bootstrap.min.css';
起初我忽略了它,因为我的 webpack 配置文件中缺少一些配置,我无法编译它。但经过一番挖掘后,我发现了关于如何将 Bootstrap 样式表添加到 App.tsx 组件的这个很好的答案。
推荐阅读
- bash - 如何在 Linux 中循环访问变量值?
- rxjs - Rxjs:执行代码并在 Observable 完成时发出值
- javascript - 在 Javascript 中更新数组元素
- python - 如何根据条件解释过滤行?
- bash - 在 bash 文件中使用带有 shell 扩展的 grep 和 awk,引用转义问题
- python - 会话未提交 - 结帐 12b - 烧瓶 Web 开发
- php - 没有为“x”防火墙上的“守卫”侦听器明确配置提供者是不明确的,因为有多个注册提供者
- vhdl - vhdl modelsim 向命令行返回“1”或“0”状态
- apache-spark - Apache Spark - 根据时间加载数据
- vba - 使用 VBA 或 AppleScript 在 Mac OS X 上获取 NetBIOS 名称