React-Bootstrap：导航栏中的两个按钮分开答案

【问题标题】：React-Bootstrap: separate two buttons in navbarReact-Bootstrap：导航栏中的两个按钮分开
【发布时间】：2021-02-02 18:27:10
【问题描述】：

我有一个 react-bootstrap 导航栏，定义如下，但我似乎找不到在登录和注册按钮之间放置一些空间的方法：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>

【问题讨论】：

标签： reactjs jsx react-bootstrap

【解决方案1】：

由于您使用的是引导程序，因此您可以利用引导程序实用程序类，在您的第一个按钮中您可以：

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

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

【讨论】：