reactJS Bootstrap中的静态导航栏答案

【问题标题】：Static navbar in reactJS BootstrapreactJS Bootstrap中的静态导航栏
【发布时间】：2020-11-06 22:58:17
【问题描述】：

我想制作不跟随用户滚动的静态导航栏。有什么办法可以做到吗反应引导？

<Navbar bg="dark" variant="dark">
  <Nav className="mr-auto">
    <Button className={'bootstrapProfile'} variant="outline-info">
      <Link key={uuidv4()} to={`/profile/${user.id}`}>
        My Profile
      </Link>{' '}
    </Button>
    <Button
      className={'bootstrapNewTopic'}
      variant="outline-info"
      onClick={() => {
        history.push('/posts');
      }}
    >
      New Topic
    </Button>
  </Nav>
  <Button variant="outline-info" onClick={() => LogOut()}>
    Log Out
  </Button>
</Navbar>

我试图给它类名fixed-top，但它不起作用。请帮忙

【问题讨论】：

应该是CSS相关的问题

标签： css reactjs react-bootstrap

【解决方案1】：

如果您不希望导航栏在用户滚动时跟随用户，则无需向导航栏添加任何特殊道具。

Codesandbox demo

【讨论】：

【解决方案2】：

您似乎正在使用 react-bootstrap 组件导航栏。如果这是正确的，而不是在组件中给出类，您可以尝试。

<Navbar bg="dark" variant="dark" fixed="top">

【讨论】：

【解决方案3】：

让一个班级说fixed-top-nav。并使用position: sticky 属性将其粘贴在顶部。将此课程添加到您的navbar

.fixed-top-nav {
  position: sticky;
  top: 0;
}

【讨论】：