React-Bootstrap: 在导航栏中分隔两个按钮

Question

我有一个 react-bootstrap 导航栏定义如下，但我似乎找不到在登录和注册按钮之间放置一些 space 的方法：here我得到的输出。

<Navbar id="navigation-bar" collapseOnSelect sticky="top" expand="lg" bg="light" variant="light">
          <Navbar.Brand href="/">Sort-CVA</Navbar.Brand>
          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="mr-auto">
              <Nav.Link href="/">Home</Nav.Link>
              <Nav.Link href="/upload-form">Upload Results</Nav.Link>
              {/*<Nav.Link href="/login">Login</Nav.Link>
              <Nav.Link href="/register">Register</Nav.Link>*/}
              <Nav.Link href="/about">About</Nav.Link>
            </Nav>
            <Form inline >
              <Button variant="primary" href="/login">Login</Button>
              <Button variant="outline-primary" href="/register">Register</Button>
            </Form>
          </Navbar.Collapse>
        </Navbar>

Answer 1

由于您使用的是 bootstrap，因此您可以利用 bootstrap 实用程序 classes，在您的第一个按钮中，您可以执行以下操作：

<Button variant="primary" href="/login" className="mr-2">Login</Button>

mr-2 class 会为您的按钮添加一些边距，这正是您在它们之间创建一些 space 所需要的。

React-Bootstrap: 在导航栏中分隔两个按钮

React-Bootstrap: separate two buttons in navbar

jsx

reactjs

react-bootstrap