使用react-bootstrap,我在左侧有一个徽标,在右侧有一个菜单项。折叠时,汉堡菜单将按预期显示在右侧。
我正在尝试重新放置折叠的物品,并使汉堡菜单在左侧和徽标在中央。
这个问题似乎很恰当:Re-positioning items on navbar collapse in Bootstrap但是我无法复制效果,因为我使用的是react-bootstrap并且语法非常不同。
这是我的代码:
import React, { Component } from 'react';
import { Navbar, Nav, Container } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import logo from '../assets/WT_JustLogo_White.png';
import './CustomNavbar.scss';
class CustomNavbar extends Component {
render() {
return (
<Navbar sticky="top" expand="lg" bg="dark" variant="dark">
<Container>
<Navbar.Brand>
<Link to="/">
<img src={logo}
className="Nav-logo"
alt="logo"
/>
</Link>
</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="ml-auto">
<Nav.Item>
<Nav.Link className="menuLink" eventKey={1}>
<Link className="text-light menuText" to="/">HOME</Link>
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link className="menuLink" eventKey={3}>
<Link className="text-light menuText" to="/About">ABOUT</Link>
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link className="menuLink" eventKey={4}>
<Link className="text-light menuText" to="/Contact">CONTACT</Link>
</Nav.Link>
</Nav.Item>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
}
}
export default CustomNavbar;
使用如下命令:使用mx-auto将order-1添加到品牌中:
`<Navbar.Brand href="#home" className="order-md-0 mx-auto order-1">React-Bootstrap</Navbar.Brand>`
将订单-0添加到导航折叠:
<Navbar.Toggle aria-controls="-navbar-nav" className="order-md-1 order-0"/>