Переместите lo go и меню бургера на свернутой навигационной панели с response- bootstrap - PullRequest
Новая
       8

Переместите lo go и меню бургера на свернутой навигационной панели с response- bootstrap

0 голосов
/ 15 января 2020

С помощью response- bootstrap У меня есть lo go слева и пункты меню справа. При свертывании меню гамбургера появляется с правой стороны, как и ожидалось.

Я пытаюсь изменить положение элементов при свертывании и у меня есть меню гамбургера слева и lo go в центре .

Этот вопрос кажется уместным: Перепозиционирование элементов на навигационной панели сворачивается в Bootstrap Однако я не могу воспроизвести эффект, потому что я использую реагирующее 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;

1 Ответ

1 голос
/ 15 января 2020

используйте порядок следующим образом: добавьте order-1 к бренду с помощью mx-auto: 

`<Navbar.Brand href="#home" className="order-md-0 mx-auto order-1">React-Bootstrap</Navbar.Brand>`

добавьте order-0 к развалу nav: 

<Navbar.Toggle aria-controls="-navbar-nav"  className="order-md-1 order-0"/>
...