React Bootstrap 导航栏不折叠(Next.js)

zphenhs4 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(3)|浏览(149)

我正在创建一个Next.js应用程序，并尝试集成react-bootstrap。
我已经设法添加了依赖项，但现在当我试图折叠移动的上的导航栏和汉堡菜单时，什么也没有发生。
我的文件如下所示：
Navbar.js

import React from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import NavDropdown from 'react-bootstrap/NavDropdown';

const BaseNavbar = () => (
    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="mr-auto">
                <Nav.Link href="#features">Features</Nav.Link>
                <Nav.Link href="#pricing">Pricing</Nav.Link>
                <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
                    <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                    <NavDropdown.Divider />
                    <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                </NavDropdown>
            </Nav>
            <Nav>
                <Nav.Link href="#deets">More deets</Nav.Link>
                <Nav.Link eventKey={2} href="#memes">
                    Dank memes
                </Nav.Link>
            </Nav>
        </Navbar.Collapse>
    </Navbar>
)

export default BaseNavbar;

_app.js

import 'bootstrap/dist/css/bootstrap.min.css'
import React from 'react';

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

我的package.json中的依赖项

"dependencies": {
    "bootstrap": "^4.5.0",
    "next": "9.4.4",
    "react": "16.13.1",
    "react-bootstrap": "^1.0.1",
    "react-dom": "16.13.1"
  }

如何解决此问题？我不确定我错过了什么！

twitter-bootstrap

来源：https://stackoverflow.com/questions/62347800/react-bootstrap-navbar-doesnt-collapse-next-js

3条答案

按热度按时间

to94eoyn1#

问题是我将Navbar组件放在我的_document.js文件中，如下所示：

import Document, { Html, Head, Main, NextScript } from 'next/document'
import BaseNavbar from '../components/navbar';
import Footer from '../components/footer';

class MyDocument extends Document {
    static async getInitialProps(ctx) {
        const initialProps = await Document.getInitialProps(ctx)
        return { ...initialProps }
    }

    render() {
        return (
            <Html>
                <Head />
                <body>
                    <Navbar />
                    <Main />
                    <Footer />
                    <NextScript />
                </body>
            </Html>
        )
    }
}

export default MyDocument

但是它不是这样工作的，所以现在我已经从_document.js文件中删除了导航栏，并且创建了一个Layout.js组件：

import BaseNavbar from './Navbar';
import Footer from './Footer';
import React from 'react';
import Head from 'next/head';

const Layout = props => (
      <div className="Layout">
        <BaseNavbar />
         <div className="Content">
          {props.children}
         </div>
         <Footer />
      </div>
)

export default Layout;

对于我的应用程序的每个页面，我调用这个组件，它将呈现我的导航栏，例如下面是我的about.js：

import Banner from '../components/Banner';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import React from 'react';
import Layout from '../components/Layout';

const About = () => (
    <Layout>
        <Banner name="Mon cursus" />
        <main className="mt-5">
            <Container>
                <Row>
                  About
                </Row>
            </Container>
        </main>
    </Layout>
)

export default About;

赞(0）回复(0）举报 2022-12-08

xghobddn2#

我解决了我的问题，把：

<Head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"></link>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
  </Head>

因此，您需要将所有Bootsrap代码放入：_app.js标记，不仅包括LINK部分，还包括SCRIPT部分

赞(0）回复(0）举报 2022-12-08

zxlwwiss3#

尝试添加 Bootstrap 的js脚本的导入，如

import 'bootstrap/dist/js/bootstrap.bundle';

赞(0）回复(0）举报 2022-12-08

我来回答

React Bootstrap 导航栏不折叠(Next.js)

3条答案

相关问题

热门标签

最新问答