navbar-fixed-top显示Navbar背后的内容

Question

滚动时如何防止内容浮动在Navbar后面？

<Navbar className="navbar-form navbar-fixed-top" responsive collapseable brand='x' inverse toggleNavKey={1} onClick={this.handleMouseDown}>

还是在:

<Nav className="navigation"..

谢谢

Answer 1

将自定义类添加到您的navbar组件，例如，sticky-nav。在其上定义以下 CSS 属性：

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

这将使您的导航栏粘在顶部，并会自动调整其以下 DOM 元素的高度。您可以sticky在MDN上阅读有关该属性的更多信息。

Answer 2

正如Scrotch所说，补充说：

<Navbar style={{backgroundColor: "#071740", position: "sticky"}} variant="dark" fixed="top">

为我工作，我是内联的，但放入一个单独的 CSS 文件也应该有效。这是迄今为止唯一对我有用的方法。

注意：我正在使用 "react-bootstrap": "^1.0.0-beta.16"

Answer 3

我也遇到了这个。我发现以下（基线引导）页面显示了固定的导航栏，并且主页正确地显示在其下方。这似乎是他们使用的css的一个功能。具体来说：

padding-top: 70px;

我添加了

body {
    padding-top: 70px;
}

到我的 css 文件，它似乎正在工作。显然，里程可能会有所不同，并不适用于所有地区等。我需要自己进一步测试它，但这可能会让您开始。