时间戳

首页 > 解决方案 > React-Bootstrap：导航栏中的两个按钮分开

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

问题描述

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

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

标签： reactjsjsxreact-bootstrap

解决方案

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

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

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

推荐阅读