React Bootstrap 在 Gatsby 版本 4 中不工作

Question

我在 Gatsby 版本 4 中使用 React Bootstrap 时遇到了问题，因为它似乎根本不起作用。没有响应。

我创建了一个小样本项目来测试这个可用的： https://github.com/Johnsensei/react-bootstrap-test

应用程序本身的代码如下所示：

import * as React from "react"
import { Container, Row, Col } from "react-bootstrap"

const IndexPage = () => {
  return (
    <Container>
      <Row>
        <Col lg={4}>Column 1</Col>
        <Col lg={4}>Column 2</Col>
        <Col lg={4}>Column 3</Col>
      </Row>
    </Container>
  )
}

export default IndexPage

理论上，在大屏幕上，这些列中的每一列都应排在同一行并占据该行的 1/3（Bootstrap 行网格的 4/12）。

结果截图如下：

正如我们所见，在大屏幕上，列不是连续的。它们都叠在一起。

下面是package.json

中的依赖

"dependencies": {
    "bootstrap": "^5.1.3",
    "gatsby": "^4.3.0",
    "react": "^17.0.1",
    "react-bootstrap": "^2.0.3",
    "react-dom": "^17.0.1"
  }

是否有一些我刚刚遗漏或忘记做的简单到荒谬的事情？如果是，这个特定代码中的什么可以修复它？

或者这些版本的 Gatsby 和 React Bootstrap 只是不兼容？如果是，我应该向 Gatsby 提交问题还是 Bootstrap?

感谢您的宝贵时间。

Answer 1

根据 docs:

If you’re using Bootstrap v4 or older, you’ll also need to include jQuery to get many of the JavaScript components to work correctly. As of Bootstrap v5, the framework no longer depends on jQuery.

因此，只要您安装了 npm 依赖项，您就需要全局导入所需的模块，以便您的应用可以访问它们。您可以通过 import 'bootstrap/dist/css/bootstrap.min.css' 模块在：

Layout分量
gatsby-browser.js

请注意，某些网格和模块可能需要其他 Bootstrap 资源。

React Bootstrap 在 Gatsby 版本 4 中不工作

React Bootstrap not working in Gatsby version 4

reactjs

react-bootstrap

gatsby

bootstrap-5