小编Dav*_*dPH的帖子

如何在 Next.js 中使用 Bootstrap 5?

安装 bootstrap 后,npm install bootstrap我添加了样式,/pages/_app.js如下所示:

import 'bootstrap/dist/css/bootstrap.css';
export default function App({ Component, pageProps }) {
    return <Component {...pageProps} />
}
Run Code Online (Sandbox Code Playgroud)

然而,任何使用 javascript 的东西都不起作用,例如他们文档中的Collapse 示例

function App() {
    return (
      <div>
        <p>
          <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
            Link with href
          </a>
          <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
            Button with data-bs-target
          </button>
        </p>
        <div class="collapse" id="collapseExample">
          <div class="card card-body">
            Some placeholder content for the collapse component. This panel is hidden by …
Run Code Online (Sandbox Code Playgroud)

javascript node.js reactjs next.js bootstrap-5

8
推荐指数
1
解决办法
3359
查看次数

标签 统计

bootstrap-5 ×1

javascript ×1

next.js ×1

node.js ×1

reactjs ×1