React Bootstrap 未在一行中呈现两列

Question

我已经安装了这些软件包：

npm install react-bootstrap bootstrap@5.1.3

然后我使用 create-react-app

创建了一个新项目

然后在 index.html（在 public 文件夹内），我添加：

<head>
...
    <script
      src="https://unpkg.com/react/umd/react.production.min.js"
      crossorigin
    ></script>

    <script
      src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
      crossorigin
    ></script>

    <script
      src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
      crossorigin
    ></script>

    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />
...
</head>

之后，我在 src 文件夹中创建了一个 Home.js 文件，并向其中添加了以下代码：

        <Container fluid>
            <Row>
                <Col>1 of 2</Col>
                <Col>2 of 2</Col>
            </Row>
        </Container>

当我执行 npm start 时，加载需要一些时间（假设它正在链接文件），之后，它会在堆栈中显示两列，如下所示：

Answer 1

检查导入，确保 bootstrap/dist/css/bootstrap.css 已导入。

import {Container,Row,Col} from "react-bootstrap"
import 'bootstrap/dist/css/bootstrap.css';

React Bootstrap 未在一行中呈现两列

React Bootstrap is not rendering two columns in one row

reactjs

react-bootstrap