反应引导导航栏有 2 行

Question

我正在使用React-Bootstrap寻找2行导航栏，类似于前段时间在Stackflow中发布的，Bootstrap 4导航栏有2行。我已经尝试了所有选项，但它不起作用。有人可以告诉我我做错了什么吗？ 下面是我的代码。

........

const Header = () => {
return (
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
<span className ="Nav">     
<Nav className="justify-content-center">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#home">Product</Nav.Link>
<Nav.Link href="#home">Solutions</Nav.Link>
<Nav.Link href="#home">Resources</Nav.Link>
</Nav>    
</span>
</Navbar.Collapse>
</Navbar>
)}
export default Header

Answer 1

我有一个类似的问题，所以我尝试更改导航栏的默认 CSS 属性，我发现flex-flow: column可以很好地工作。

请注意，您必须覆盖导航栏的默认 CSS！

另一种方法是将导航栏包装在div 元素中，如下所示：

<div className="header">
<div className="row-1">
Row 1 contetnt
</div>
<Navbar bg="light" expand="md">
Row 2 content
</Navbar>
</div>