如何在nextjs中创建引导程序5个选项卡？

问题描述

我已经安装了 bootstrap 并在我的 _app.js 中导入了 import 'bootstrap/dist/css/bootstrap.css' 但是创建标签后它不起作用有人可以帮忙吗？

这是标签代码

import Link from 'next/link'

const NavigationTabs = () => {
    return (
        <>
            <nav>
                <div
                    className='nav nav-tabs mb-3 justify-content-center'
                    id='tabContentList'
                    role='tablist'
                >
                    <Link href='#login' className='nav-item'>
                        <a
                            className='nav-link active'
                            id='nav-login-tab'
                            role='tab'
                            data-bs-toggle='tab'
                            data-bs-target='#login'
                            aria-controls='login'
                            aria-selected='true'
                        >
                            Login
                        </a>
                    </Link>
                    <Link href='#register' className='nav-item'>
                        <a
                            className='nav-link active'
                            id='nav-register-tab'
                            data-bs-toggle='tab'
                            data-bs-target='#register'
                            role='tab'
                            aria-controls='register'
                            aria-selected='false'
                        >
                            Register
                        </a>
                    </Link>
                </div>
            </nav>
            <div className='tab-content' id='nav-tabContent'>
                <div
                    className='tab-pane fade show active'
                    id='login'
                    role='tabpanel'
                    aria-labelledby='nav-login-tab'
                >
                    Tab 1 content
                </div>
                <div
                    className='tab-pane fade'
                    id='register'
                    role='tabpanel'
                    aria-labelledby='nav-register-tab'
                >
                    Tab 2 content
                </div>
            </div>
        </>
    )
}

export default NavigationTabs

是否有更好的方法在 bootstrap 5 中创建它，或者我应该从 bootstrap 添加脚本标签？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）