小编典典

twitter bootstrap导航栏固定顶部重叠站点

html

我在网站上使用引导程序,并且导航栏固定顶部出现问题。当我只使用常规导航栏时,一切都很好。但是,当我尝试将其切换到导航栏固定顶部时,该网站上的所有其他内容都会向上移动,就像导航栏不存在并且导航栏与之重叠一样。我基本上是这样布置的:

.navbar.navbar-fixed-top
  .navbar-inner
    .container
.container
  .row
    //yield content

我试图完全复制引导程序示例,但仅在使用navbar fixed top时仍然存在此问题。我究竟做错了什么?


阅读 374

收藏
2020-05-10

共1个答案

小编典典

您的答案是正确的docs:

### 需要身体填充

固定的导航栏将覆盖您的其他内容,除非您将其添加padding到的顶部<body>。试用您自己的值或使用下面的代码段。提示:默认情况下,导航栏的高度为50px。

 body { padding-top: 70px; }

确保在核心Bootstrap CSS 之后 添加此名称。

并在 Bootstrap 4文档中…

固定的导航栏使用位置:固定,这意味着它们是从DOM的正常流程中拉出的,并且可能需要自定义CSS(例如上的padding-top)以防止与其他元素重叠。

2020-05-10