React中Bootstrap Navbar无法全屏且未贴合顶部问题求助

我在React应用中使用Bootstrap Navbar时遇到问题：Navbar无法铺满屏幕宽度，左右两侧存在间隙，同时也没有贴合屏幕顶部。

import React from "react";
import "./header.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";

const Header = () => {
  return (
    <>
      <Navbar expand="lg" className="bg-body-tertiary">
        <Container>
          <Navbar.Brand href="#home">Navbar</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="#about">About</Nav.Link>
              <Nav.Link href="#contact">Contact</Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </>
  );
};

export default Header;

我已尝试的解决方法：

• 移除Navbar外层的Container容器
• 覆盖Bootstrap样式以确保全屏和边距为0

但仍无法让Navbar铺满全屏并贴合顶部，请问有什么解决建议吗？

解决建议 #

1. 重置全局body默认样式 #

浏览器默认给body设置了margin: 8px，这是顶部间隙的常见原因。在全局CSS文件（或header.css）中添加：

body {
  margin: 0;
  padding: 0;
}

2. 让Navbar铺满全屏 #

如果移除Container后仍有间隙，给Navbar添加自定义类并覆盖Bootstrap的默认限制：
修改Navbar组件：

<Navbar expand="lg" className="bg-body-tertiary full-width-navbar">

在header.css中添加：

.full-width-navbar {
  width: 100vw;
  margin: 0;
  padding: 0;
  left: 0;
  right: 0;
}

3. 保留Container但实现全屏 #

如果需要内部内容居中显示，不要直接移除Container，改用fluid属性的容器：

<Container fluid>

Container fluid会铺满屏幕宽度，无左右内边距，同时支持响应式布局。

4. 检查父组件样式干扰 #

确认Header组件的父元素没有设置margin、padding或max-width，这些可能导致Navbar无法全屏。

5. 确认样式加载顺序 #

确保Bootstrap的CSS在自定义CSS之前导入，比如在index.js中：

import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Header from './Header';

这样自定义样式才能正确覆盖Bootstrap的默认样式。

内容的提问来源于stack exchange，提问作者Kasra Panahi