React Bootstrap NavBar无法延伸至页面末端问题求助

问题原因 #

当页面出现水平滚动条时，导航栏的宽度仅适配了初始视口宽度，未跟随页面实际内容宽度延伸，导致向右滚动后右侧出现空白区域。

具体解决方案 #

1. 替换为流体容器（推荐）

React Bootstrap的默认Container是固定宽度的，改用fluid属性让容器铺满整个页面宽度，同时修正React的类名语法（class改为className）：

import Container from "react-bootstrap/Container";
import Navbar from "react-bootstrap/Navbar";
import "./component.css";

function NavBar() {
  return (
    <>
      <Navbar bg="dark" variant="dark" className="navbar-expand-lg">
        <Container fluid>
          <Navbar.Brand href="#home">
            Financial
          </Navbar.Brand>
        </Container>
      </Navbar>
    </>
  );
}

export default NavBar;

2. 添加自定义CSS强制宽度适配

如果上述方法无效，在component.css中添加以下样式，确保导航栏宽度跟随页面内容延伸：

/* 确保导航栏宽度适配页面 */
.navbar {
  min-width: 100%;
  width: auto;
}

/* 确保根容器宽度正确 */
html, body {
  min-width: 100%;
  width: fit-content;
}

3. 检查父容器限制

确认导航栏的父组件（如App组件）没有设置width: 100vw、overflow-x: hidden等限制宽度的样式，若有则移除这些设置，让父容器能随内容宽度自动调整。

内容的提问来源于stack exchange，提问作者Khalid Mihlar