为什么按钮向左移动？

Question

学习关于 Node、React、Express 的 Udemy 教程。

他正在使用页眉，他的代码将登录和购物车链接移到了最右边。我有和他一样的代码，但我的链接没有移到最右边。我根据教程使用 React-bootstrap。我的代码是一样的吗？

<header>
  <Navbar bg='dark' variant='dark' expand='lg' collapseOnSelect>
    <Container>
      <Navbar.Brand href='/'>BShop</Navbar.Brand>
      <Navbar.Toggle aria-controls='basic-navbar-nav' />
      <Navbar.Collapse id='basic-navbar-nav'>
        <Nav className='ml-auto'>
          <Nav.Link href='/cart'>
            <i className='fas fa-shopping-cart'></i>Cart
          </Nav.Link>
          <Nav.Link href='/login'>
            <i className='fas fa-user'></i>Login
          </Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Container>
  </Navbar>
</header>

Answer 1

也许您使用的是最新的 bootstrap v5，它将 ml 和 mr util 类更改为 ms 和 me .

在 v5 中，左右 utils 已更改为 start(s) 和 end(e)[1]。因此，尝试将 ml-auto 替换为 ms-auto。

参考：

https://getbootstrap.com/docs/5.0/migration/#utilities

为什么按钮向左移动？

Why are the buttons shifted left?

html

css

reactjs

react-bootstrap