Next.js 13 + Bootstrap 5.3.1垂直导航栏header/body高度为0问题求助

使用Next.js 13搭配Bootstrap 5.3.1开发时，切换为Offcanvas垂直侧边栏导航组件后，<header>和<body>元素高度始终为0px，使用水平导航栏时无此异常。已检查HTML标签嵌套逻辑，尝试过CDN与npm两种Bootstrap引入方式，问题未解决。

相关代码 #

1. src/app/RootLayout.tsx #

import 'bootswatch/dist/superhero/bootstrap.min.css';
import dynamic from 'next/dynamic';

const DynamicBootstrap = dynamic(
    () => require('bootstrap/dist/js/bootstrap.bundle.min.js'),
    { ssr: false }
);
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    )
}

2. dashboard/pages.tsx #

import Header from "../components/Header";

export default async function Dashboard() {
  return (
    <>
      <Header/>
      <main>
        <h1>Dashboard</h1>
      </main>
    </>
  )
}

3. components/Header.tsx（垂直导航栏组件） #

import Link from 'next/link';
import logo from '../../../../public/images/logoDbq.png';
import Image from 'next/image';

export default function Header() {
    return(
        <header>
            <nav className="navbar navbar-dark bg-dark fixed-top">
                <div className="container-fluid">
                    <Link className="navbar-brand" href="#"><Image src={logo} width={50} height={50} alt=""/>Welcome</Link>
                    <button className="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="offcanvas offcanvas-end" tabIndex={-1} id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
                        <div className="offcanvas-header">
                            <h5 className="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
                            <button type="button" className="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                        </div>
                        <div className="offcanvas-body">
                            <ul className="navbar-nav justify-content-end flex-grow-1 pe-3">
                                <li className="nav-item">
                                    <Link className="nav-link active" aria-current="page" href="#">Home</Link>
                                </li>
                                <li className="nav-item">
                                    <Link className="nav-link" href="#">Link</Link>
                                </li>
                                <li className="nav-item dropdown">
                                    <Link className="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    Dropdown
                                    </Link>
                                    <ul className="dropdown-menu">
                                        <li><Link className="dropdown-item" href="#">Action</Link></li>
                                        <li><Link className="dropdown-item" href="#">Another action</Link></li>
                                        <li>
                                            <hr className="dropdown-divider"/>
                                        </li>
                                        <li><Link className="dropdown-item" href="#">Something else here</Link></li>
                                    </ul>
                                </li>
                            </ul>
                            <form className="d-flex mt-3" role="search">
                                <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
                                <button className="btn btn-outline-success" type="submit">Search</button>
                            </form>
                        </div>
                    </div>
                </div>
            </nav>
        </header>
    )
}

解决方案 #

问题核心是Bootstrap的fixed-top导航栏会脱离文档流，导致父元素<header>因内部无占据空间的元素而高度为0，同时<body>没有预留顶部空间，视觉上也会出现高度异常。

1. 为body和header添加基础样式 #

在RootLayout中添加全局样式，确保body占满视口高度并预留导航栏空间，同时给header设置最小高度：

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en">
            <style jsx global>{`
                body {
                    padding-top: 56px; /* 匹配Bootstrap fixed-top导航栏默认高度 */
                    min-height: 100vh; /* 确保body至少占满视口高度 */
                    margin: 0; /* 清除默认margin */
                }
                header {
                    min-height: 56px; /* 强制header拥有基础高度 */
                }
            `}</style>
            <body>
                {children}
            </body>
        </html>
    )
}

2. 确保Bootstrap JS客户端初始化正常 #

当前动态引入方式没问题，若Offcanvas交互异常，可在Header组件中通过useEffect手动触发初始化：

import { useEffect } from 'react';

export default function Header() {
    useEffect(() => {
        import('bootstrap/dist/js/bootstrap.bundle.min.js');
    }, []);

    // 其余组件代码不变
}

3. 修复Next.js Link组件的Bootstrap兼容性 #

Bootstrap的交互依赖原生<a>标签属性，若Dropdown或Offcanvas功能异常，给Link添加legacyBehavior属性：

<Link legacyBehavior href="#">
    <a className="navbar-brand"><Image src={logo} width={50} height={50} alt=""/>Welcome</a>
</Link>

内容的提问来源于stack exchange，提问作者cedric godard