Bootstrap React Nextjs，看起来和文档上的不一样答案

【问题标题】：Bootstrap React Nextjs, doesn't look the same as on the documentationBootstrap React Nextjs，看起来和文档上的不一样
【发布时间】：2021-09-14 00:59:35
【问题描述】：

我在应用程序的前端使用 bootstrap、react 和 nextjs，并尝试使用示例 react-bootstrap 示例 - https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic。结果应该看起来像：在我看来完全不同：。

我尝试过的事情：

从默认引导程序包更改为 bootstrap@next
在 index.jsx 文件和 example.jsx 文件中导入 Bootstrap

以下是相关代码： Example.jsx - 与代码和框相同。

import 'bootstrap/dist/css/bootstrap.min.css'

import React, { useState } from 'react'

import Jumbotron from 'react-bootstrap/Jumbotron'
import Toast from 'react-bootstrap/Toast'
import Container from 'react-bootstrap/Container'
import Button from 'react-bootstrap/Button'

const ExampleToast = ({ children }) => {
  const [show, toggleShow] = useState(true)

  return (
    <>
      {!show && <Button onClick={() => toggleShow(true)}>Show Toast</Button>}
      <Toast show={show} onClose={() => toggleShow(false)}>
        <Toast.Header>
          <strong className="mr-auto">React-Bootstrap</strong>
        </Toast.Header>
        <Toast.Body>{children}</Toast.Body>
      </Toast>
    </>
  )
}

const App = () => (
  <Container className="p-3">
    <Jumbotron>
      <h1 className="header">Welcome To React-Bootstrap</h1>
      <ExampleToast>
        We now have Toasts
        <span role="img" aria-label="tada">
          ????
        </span>
      </ExampleToast>
    </Jumbotron>
  </Container>
)

export default App

index.jsx

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage

npm list 的结果：

├── bcrypt@5.0.1
├── bootstrap@5.0.0-beta3
├── fastify-cookie@5.3.1
├── fastify-jwt@3.0.0
├── fastify-mongodb@2.0.1
├── fastify-nextjs@5.4.1
├── fastify@3.18.0
├── next@10.2.3
├── nodemon@2.0.7
├── react-bootstrap@1.6.1
├── react-dom@17.0.2
└── react@17.0.2

编辑： 如果我在 index.jsx 中包含引导程序，结果是根本没有应用 css。

【问题讨论】：

标签： css node.js reactjs next.js bootstrap-5

【解决方案1】：

你需要为 nextJS 安装引导程序。

npm install bootstrap@next

本次安装完成后，请将css文件导入nextJS _app.js

// add bootstrap css 
import 'bootstrap/dist/css/bootstrap.css'// own css files here
import "../css/customcss.css";

export default function MyApp({ Component, pageProps }) {
      return <Component {...pageProps} />
    }

为了响应性，在你的 nextjs 组件上添加以下内容。

<Head>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>

另一种选择是使用 CDN。

【讨论】：

嗨，对我来说，这会产生相同的混合结果，不知道为什么会这样，也许是别的原因？
您是否在 _app.js 上导入了 bootstrap.css ？
知道答案中显示的路径与您的本地路径不同。记住这一点。
是的，我相信我做到了，它会生成屏幕截图 #2，如果我不将其包含在 pages/_app.js 中，它会恢复为基本 html。
我正在尝试使用代码沙箱做一个最小的例子，除了我实现的中心 .header 之外似乎没有任何其他功能/css文件，但这仍然没有太大变化

【解决方案2】：

我刚刚意识到代码沙盒使用引导程序 4.6，而我使用的是引导程序 5，当我降级进行测试时，它可以工作。 (掌心)

【讨论】：