Navbar品牌与React-Bootstrap中的Navbar项目分开

Question

我需要创建一个如下所示的导航栏： 为此，我将React与Bootstrap一起使用。

如果我直接使用React-Bootstrap网站中的示例，结果如下：
这是代码：

<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>

在Bootstrap中阅读Flexbox的文档，我发现可以使用Flex Grow类将其赋予Brand项目所需的间距。因此，我将flex-grow-1类添加到了Navbar.Brand项目中，并得到了以下结果： 这是代码：

<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项，结果是预期的，但是我松开了折叠功能，这没有任何意义。