如何让React Bootstrap顶部导航栏占满100%宽度？

核心问题与修复方案 #

你的问题主要来自结构嵌套错误、Container组件属性使用不当两个方面，按以下步骤修改即可实现100%宽度导航栏：

存在的问题

• 你错误将页面路由容器放在了<Navbar>组件内部，<Navbar>作为顶部导航组件仅应容纳导航栏本身的内容，页面主体内容必须放在<Navbar>外部
• React-Bootstrap默认的<Container>组件自带响应式max-width限制，仅设置width:100%无法覆盖默认的max-width约束
• <Navbar>标签的className属性缺少闭合双引号，会导致部分样式不生效
• 多余的<br/>标签无法解决fixed定位导航遮挡内容的问题，需要给全局body添加上内边距处理

修复步骤

1. 调整组件嵌套结构，将<Router>提至最外层，<Navbar>和页面路由容器平级
2. 导航栏内部使用带fluid属性的<Container>，直接实现无最大宽度限制的全宽容器
3. 修复属性语法错误，删除多余的<br/>标签
4. 新增全局样式避免fixed定位导航遮挡页面内容

修正后组件代码

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { Navbar, Nav, Container } from 'react-bootstrap';
import './Navigation.css';
import Table from '../../assets/table/Table';
import TableGrouping from '../../assets/table/TableGrouping';
import Home from '../../pages/Home';

const Navigation = () => {
    return(
        <Router>
            {/* 导航栏单独作为第一层子组件 */}
            <Navbar className="navbar pt-0 fixed-top">
                {/* 使用fluid实现全宽容器 */}
                <Container fluid> 
                    <Nav className="bg-custom col-12">
                        <Link className="nav-item" to="/">Home</Link>
                        <Link className="nav-item" to="/tableGrouping">Grouping</Link>
                        <Link className="nav-item" to="/table">Table</Link>
                    </Nav> 
                </Container>
            </Navbar>
            {/* 页面内容放在导航栏外部 */}
            <Container>
                <Routes>
                    <Route path="/" element={<Home/>}/>
                    <Route path="/tableGrouping" element={<TableGrouping/>}></Route>
                    <Route path="/table" element={<Table/>}></Route>
                </Routes>
            </Container>
        </Router>
    )
}

export default Navigation;

修正后样式表代码

.nav-item {
    text-decoration: none;
    color: white;
    padding: 5px 10px 8px 20px; 
}

/* 新增：避免fixed导航遮挡页面内容，数值可根据你的导航高度调整 */
body {
    padding-top: 50px;
}

.bg-custom {
    background-color: rgb(154, 166, 218);
    width: 100%;
}

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