twitter-bootstrap - 带有 2 行的 React-Bootstrap 导航栏
问题描述
我正在使用 React-Bootstrap 寻找 2 行导航栏,类似于前一段时间在 Stackflow 中发布的,Bootstrap 4 navbar with 2 rows。我已经尝试了所有选项,但它不起作用。有人可以告诉我我做错了什么。下面是我的代码。
...........
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
解决方案
我有一个类似的问题,所以我尝试更改 Navbar 的默认 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>
推荐阅读
- php - 电子应用程序显示子进程错误并且它不起作用
- node.js - Nodejs express:如何从循环内的内部回调将值返回到外部回调中
- css - 如何在标题和段落中拉伸文本
- json - 具有较大负载的 JsonDocument 解析不完整
- sql - 如何在where子句中使用长字符串更新oracle表
- ios - 使用boundingBox绘制矩形
- python - 为什么从 cuda 多次初始化 .dll
- javascript - 如何修改此 jQuery 以在下拉列表中动态显示和隐藏相关选择选项?
- microsoft-graph-api - POST 邀请调用返回状态设置为“错误”的响应的条件是什么
- graphql - 订阅结果上的联合类型