单击时不会打开下拉菜单。 我在 nextjs 12 上使用 bootstrap 5。
我尝试添加 CDN 链接，但不起作用。
如有任何帮助，我们将不胜感激。
在app.js中我导入了bootstrap.css
_app.js
import "../styles/globals.css";
import "bootstrap/dist/css/bootstrap.css";
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
在 Index.js 中我添加了 CDN。
index.js
import Head from "next/head";
import Footer from "../components/Footer";
import Header from "../components/Header";
import Script from "next/script";
export default function Home() {
return (
<main className="d-flex flex-column min-vh-100">
<Header />
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"></link>
</Head>
<Script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" />
<div className="px-4 py-5 my-5 text-center flex-grow-1">
<h1 className="display-5 fw-bold">Next.js + Bootstrap ❤️</h1>
</div>
<Footer />
</main>
);
}
Header.js
const Header = () => {
return (
<header className="p-3 bg-dark text-white">
<div className="container">
<div className="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start ">
<ul className="nav col-12 col-lg-auto ms-lg-auto mb-2 justify-content-center mb-md-0 ">
<li className="nav-item dropdown">
<a href="#" className="nav-link px-2 text-white dropdown-toggle">
Services
</a>
<div className="dropdown-menu">
<a href="#" className="dropdown-item">
React
</a>
<a href="#" className="dropdown-item">Test</a>
</div>
</li>
</ul>
</div>
</div>
</header>
);
};
export default Header;
请访问此教程，它可以帮助您将带有引导程序的导航栏添加到react或nextjs项目中
在React项目中使用navbar时不要使用bootstrap的cdn链接
您可以使用 React bootstrap 框架，添加导航栏
npm install react-bootstrap bootstrap
将样式表添加到
app.jsimport 'bootstrap/dist/css/bootstrap.min.css';
并创建一个导航栏组件，如下面的代码
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
function BasicExample() {
return (
<Navbar bg="light" expand="lg">
<Container>
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
<NavDropdown title="Dropdown" id="basic-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>
</Navbar.Collapse>
</Container>
</Navbar>
);
}
export default BasicExample;
step-1：在 _app.js
中导入 bootstrap cssimport "bootstrap/dist/css/bootstrap.min.css";
step-2 在 _app.js 中导入 bootstrap js
import { useEffect } from "react";
useEffect(() => {
require("bootstrap/dist/js/bootstrap.bundle.min.js");
}, []);
最终代码如下：
import "bootstrap/dist/css/bootstrap.min.css";
import { useEffect } from "react";
import '@/styles/globals.css'
config.autoAddCss = false;
export default function App({ Component, pageProps }) {
useEffect(() => {
require("bootstrap/dist/js/bootstrap.bundle.min.js");
}, []);
return <Component {...pageProps} />
}
按照之前评论中的说明安装 bootstrap 并将
import "bootstrap/dist/css/bootstrap.min.css";这对我有用：把它放在你想使用下拉菜单的地方：
import { Dropdown } from "bootstrap";