导航项和导航品牌之间的间距

Question

我正在我的网站上以响应式方式制作导航栏。但是我想要在导航栏品牌和导航项之间有一个 space...我试图在“导航栏容器”上制作一个带有对齐内容（在之间、均匀地、周围等 ..）的 space 没有任何效果。 .. 有任何想法吗？谢谢 :-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 是一个 flexbox，您可以使用“gap-x”bootstrapclass。另一方面，您可以在导航上使用“ps-x”或“ms-x”bootstrap classes:

编辑：如果要均匀分布导航项，请添加“flex-grow-1”和“justify-content-evenly”classes到导航：

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

导航项和导航品牌之间的间距

Spacing between nav items and nav brand

react-bootstrap