React-Bootstrap inline radio无法并排？正确实现内联布局

在Electron+TypeScript技术栈下使用React-Bootstrap组件库，参考官方Check内联示例编写代码后，两个设置了inline属性的单选框依然无法并排显示。已尝试给Form组件传递inline属性、移除Container/Row结构重写代码均未生效，希望仅通过React-Bootstrap原生组件能力实现并排布局，不依赖自定义flex样式调整。
原问题中的示例代码如下：

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;

绝大多数这类inline Check样式失效的问题，都可以通过以下三步定位解决，全程不需要自定义CSS样式：

• 第一步：确认Bootstrap核心CSS已经全局引入
  React-Bootstrap本身仅封装组件逻辑和类名映射，不会内置Bootstrap的样式定义，漏引CSS是Electron项目中最常见的样式失效原因：
  • 先检查依赖安装情况，确认已经安装和当前React-Bootstrap版本匹配的bootstrap包，可通过npm ls react-bootstrap bootstrap查看版本对应关系（一般React-Bootstrap v2.x对应Bootstrap v5.x，v1.x对应Bootstrap v4.x）
  • 在项目的入口TSX文件（如main.tsx/index.tsx）中添加全局CSS引入：import 'bootstrap/dist/css/bootstrap.min.css'
• 第二步：修正栅格结构的不规范写法
  Bootstrap的栅格系统要求Row内部必须嵌套Col组件才能完成正确的布局计算，原代码中Form直接放在Row内部、没有Col包裹的写法，在部分Chromium版本（Electron内嵌的Chromium版本经常和浏览器版本有差异）下会导致inline类的布局计算异常，仅需通过原生组件调整结构即可修复，不需要加自定义类名：
  调整后的可运行代码：

  import React from 'react';
  import { Container, Row, Col, Form } from 'react-bootstrap';
  
  const ExperimentTypeForm = () => {
    return (
      <Container fluid>
        <Row>
          <Col xs={12}>
            <Form>
              <div className="mb-3">
                <Form.Check
                  inline
                  label="选项1"
                  name="radio-group-demo"
                  type="radio"
                  id="inline-radio-1"
                />
                <Form.Check
                  inline
                  label="选项2"
                  name="radio-group-demo"
                  type="radio"
                  id="inline-radio-2"
                />
              </div>
            </Form>
          </Col>
        </Row>
      </Container>
    )
  }
  
  export default ExperimentTypeForm;
  

  这里两个细节优化都是基于React-Bootstrap的原生能力：
  • 给同组的两个单选框添加统一的name属性，符合原生单选框的交互逻辑，避免出现单选框无法正常选中的连带bug
  • 去掉不必要的key属性在普通div上的写法（key是列表渲染场景下的专属属性，普通DOM节点加key没有实际作用）
• 第三步：排除版本兼容问题
  如果完成前两步后样式依然异常，检查使用的React-Bootstrap版本：v2.0以上版本的Form.Check原生支持inline属性，不需要给外层Form组件额外传递inline属性；如果使用的是v1.x老版本，inline属性的生效依赖Bootstrap 4的类名定义，版本不匹配会直接导致样式失效。

内容的提问来源于stack exchange，提问作者Lucas S. G.