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：

如果您使用的是 Bootstrap v4 或更早版本，您还需要包含 jQuery 让许多 JavaScript 组件正常工作。作为 从 Bootstrap v5 开始，框架不再依赖 jQuery。

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

• Layout组件
• gatsby-browser.js

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