nav项目与nav品牌之间的间隔

Question

我正在做一个肚脐在我的网站上回应。但我想在导航品牌和导航设备之间留个位置.我试着用合理的内容(中间、均匀、周围等)腾出一个空间。在“肚脐-容器”上什么都不管用。。。有什么想法吗？谢谢:-D

import {
  Container,
  Navbar,
  Nav,
} from 'react-bootstrap';
import logo from 'src/assets/images/logo.png';

const AppHeader = () => (
  <div>
    <Navbar id="mainNav" expand="lg">
      <Container id="navbar-container">
        <Navbar.Brand href="#home"> <img src={logo} alt="logo" height="80" />
        </Navbar.Brand>
        <h2 className="navbar-title">Concert'o</h2>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav ">
          <Nav className="">
            <Nav.Link className="ms-auto" href="#home">Accueil</Nav.Link>
            <Nav.Link href="#home">Genres</Nav.Link>
            <Nav.Link href="#home">Régions</Nav.Link>
            <Nav.Link href="#home">Tous les événements</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  </div>
);
export default AppHeader;

@use 'src/styles/vars';

#mainNav{
  background-color: vars.$backgroundColor;
}
.navbar-title{
  color: vars.$fontColor !important;
  margin-right: 1em;
  font-weight: bolder;
  text-align: center;
}

.nav-link {
  color: vars.$fontColor !important;
  font-weight: bold;
  text-align: center;
}

Answer 1

由于Navbar是一个柔性盒，您可以使用"gap-x“引导类。另一方面，您可以在Nav上使用"ps-x“或"ms-x”引导类：

编辑：如果您想要均匀地传播nav项，那么在Nav中添加“Flex-Growd-1”和“Rational-Content-均匀”类：

https://codesandbox.io/s/great-darkness-z4nek4

Answer 2

为了在Nav徽标和所有Navlink之间创建一个很大的差距，我发现您可以将Navbar.Collapse更改为flex列，然后使用对齐项结束，如下所示示例代码所示