Марка Navbar отдельно от элементов Navbar в React-Bootstrap - PullRequest
Новая
       30

Марка Navbar отдельно от элементов Navbar в React-Bootstrap

0 голосов
/ 18 апреля 2019

Мне нужно создать Navbar, как показано ниже: NavBar Fraterna Для этого я использую React с React-Bootstrap.

Если я использую пример, который находится на сайте React-Bootstrap прямо из коробки, результат будет следующим: NavBar wrong
Это код: 

<Navbar id='navigation-container' bg="light" expand="lg" fixed='top' fluid>
  <Navbar.Brand href="#home">
    <img id='logo-flor-fraterna' 
      src={logoFlorFraterna} 
      alt='Logo Flor Fraterna' 
      className='d-inline-block align-top'
    />
    {'La Fraterna' }
  </Navbar.Brand>
  <Navbar.Toggle aria-controls="basic-navbar-nav" />
  <Navbar.Collapse id="basic-navbar-nav">
    <Nav>
      <Nav.Link href="#home">¿Qué somos?</Nav.Link>
      <Nav.Link href="#link">Propuestas</Nav.Link>
      <Nav.Link href="#link">Gastronomía</Nav.Link>
      <Nav.Link href="#link">Contacto</Nav.Link>
    </Nav>
  </Navbar.Collapse>
</Navbar>

Читая документацию Flexbox в Bootstrap, я понял, что могу использовать классы Flex Grow для того, чтобы дать элементу бренда необходимое расстояние.Поэтому я добавил класс flex-grow-1 к элементу Navbar.Brand и получил следующий результат: Navbar broken И это код: 

<Navbar id='navigation-container' bg="light" expand="lg" fixed='top' fluid>
  <Navbar.Brand href="#home" className='flex-grow-1'>
    <img id='logo-flor-fraterna' 
      src={logoFlorFraterna} 
      alt='Logo Flor Fraterna' 
      className='d-inline-block align-top'
    />
    {'La Fraterna' }
  </Navbar.Brand>
  <Navbar.Toggle aria-controls="basic-navbar-nav" />
  <Navbar.Collapse id="basic-navbar-nav">
    <Nav>
      <Nav.Link href="#home">¿Qué somos?</Nav.Link>
      <Nav.Link href="#link">Propuestas</Nav.Link>
      <Nav.Link href="#link">Gastronomía</Nav.Link>
      <Nav.Link href="#link">Contacto</Nav.Link>
    </Nav>
  </Navbar.Collapse>
</Navbar>

К вашему сведению: если я удалюNavbar.Collapse item - результат, как и ожидалось, но я теряю функциональность свернуть, что не имеет никакого смысла.

...