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

Question

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

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样式问题。