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

Posted 2023-03-06

【中文标题】如何让顶部导航栏占据 100% 的宽度？

【英文标题】：How can I make top navbar take 100% of the width?

【发布时间】：2021-12-31 00:57:27

【问题描述】：

我尝试了很多事情，包括将宽度设置为 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%;

【参考方案1】：

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

【讨论】：

你从Navbar组件渲染的html是什么？

在没有<container> 的情况下简单地尝试一下，但我承认我不知道它是否有效。

一切都取决于 HTML 呈现的结构。大概Container用class="container"渲染div，那么Nav组件渲染什么呢？

这些cmets不是用来聊天的阿祖，你要不要把答案贴出来？兄弟周末愉快。

@Azu 是 <Container> 渲染 <div class="container">