如何让顶部导航栏占据 100% 的宽度？

Question

如何让顶部导航栏占据 100% 的宽度？我尝试了很多事情，包括将宽度设置为 100% 以及在绝望后使用<br>。我还读到我们不应该在导航栏中使用行，我尝试遵循在导航栏中使用容器的最佳实践。我的思维过程有什么问题？

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(
        <Navbar className="navbar pt-0 fixed-top>
            <Router>
                <Container> 
                    <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>
                <br/>
                <Container>
                    <Routes>
                        <Route path="/" element={<Home/>}/>
                        <Route path="/tableGrouping" element={<TableGrouping/>}></Route>
                        <Route path="/table" element={<Table/>}></Route>
                    </Routes>
                </Container>
            </Router>
        </Navbar>
    )
}

export default Navigation;

这是我的样式表：

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

.container {
    width: 100%;
}

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

Answer 1

在 Bootstrap 中使用 <div class="Container"> 肯定会包含宽度，但您使用的是 <container>。 Bootstrap 可能会为您带来优势。尝试删除该容器/div，并在没有编辑 CSS 的情况下检查结果，因为这可能最终导致稍后出现其他 Bootstrap 样式问题。