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

html HTML

猴子村村

2020-03-23

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

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

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

第2988篇《twitter bootstrap导航栏固定顶部重叠站点》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共15个回答
小卤蛋米亚蛋蛋 2020.03.23

我只是将导航栏包裹在一个 

<div width="100%">
<div class="nav-? ??">
...
</nav>
</div>

没有花哨的轨迹，但它起作用。

Tony凯 2020.03.23

除了Nick Bisby的答案，如果您在轨道中使用HAML遇到此问题，并且已在此处应用Roberto Barros的修复程序：

我将“ bootstrap_and_overrides.css”中的require替换为：

=需要twitter-bootstrap-static / bootstrap.css.erb

（参见https://github.com/seyhunak/twitter-bootstrap-rails/issues/91）

...您需要将主体CSS放在require语句之前，如下所示：

@import "twitter/bootstrap/bootstrap";
body { padding-top: 40px; }
@import "twitter/bootstrap/responsive";
=require twitter-bootstrap-static/bootstrap.css.erb

如果require语句在正文CSS之前，则它将无效。

Mandy村村 2020.03.23

我会这样做：

// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }

这应确保nav块不会拉长页面范围并覆盖页面内容。

Davaid小宇宙 2020.03.23

您要做的就是 

@media (min-width: 980px) { body { padding-top: 40px; } }
番长樱梅 2020.03.23

对于Bootstrap 3. +，我将使用以下CSS来修复基于https://github.com/twbs/bootstrap/issues/1768的 navbar-fixed-top和锚跳转重叠的问题 

/* fix fixed-bar */
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
  body { padding-top: 40px; }
}

/* fix fixed-bar jumping to in-page anchor issue */
*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; 
  height: 75px; 
  visibility: hidden; 
}
JinJin 2020.03.23

在nav标签内使用此类

class =“ navbar navbar-expand-lg navbar-light bg-light sticky-top ”

对于bootstrap 4

斯丁前端 2020.03.23

正如我在类似问题中发布的那样，我在真正的固定导航栏之前创建了一个虚拟的非固定导航栏取得了成功。

<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
    <!-- Nav bar details -->
</nav>

该间距在所有屏幕尺寸上都非常合适。

Gil伽罗小宇宙 2020.03.23

只要改变fixed-top用sticky-top。这样，您就不必计算填充。
而且有效！！

小胖Tony 2020.03.23

Bootstrap 4的解决方案在我的所有项目中均能完美运行：

从更改第一行

navbar-fixed-top

至

sticky-top

Bootstrap文档参考

大概他们做对了：D

Mandy村村 2020.03.23

问题在于navbar-fixed-top，除非指定正文填充，否则它将覆盖您的内容。在100％的情况下，此处提供的解决方案均无效。页面加载后，JQuery解决方案使页面闪烁/移动，这看起来很奇怪。

对我而言，真正的解决方案不是使用navbar-fixed-top，而是使用navbar-static-top。

.navbar { margin-bottom:0px;} //for jumtron support, see http://stackoverflow.com/questions/23911242/gap-between-navbar-and-jumbotron

<nav class="navbar navbar-inverse navbar-static-top">
...
</nav>
null 2020.03.23

正如其他人所说，在身体上添加填充顶部效果很好。但是，当您使屏幕变窄（以手机宽度为单位）时，导航栏和机身之间会出现间隙。同样，拥挤的导航栏可以包装到多行栏，再次覆盖部分内容。

这为我解决了这类问题

body { padding-top: 40px; }
@media screen and (max-width: 768px) {
    body { padding-top: 0px; }
}

默认情况下，这会产生40px的填充，而在768px宽度以下时会填充0px（根据bootstrap的文档，这是将在其中创建间隙的手机布局截止点）

DavaidTony宝儿 2020.03.23

您的答案是正确的docs：

需要身体填充

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

body { padding-top: 70px; }

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

并在Bootstrap 4文档中...

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

神乐 2020.03.23

这个问题是已知的，并且在twitter引导站点中有一种解决方法：

粘贴导航栏时，请记住要考虑其下方的隐藏区域。向中添加40px或更多的填充<body>。确保将其添加到核心Bootstrap CSS之后以及可选的响应CSS之前。

这为我工作：

body { padding-top: 40px; }
小胖 2020.03.23

我把它放在yield容器之前：

<div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;">&nbsp;</div>

我喜欢这种方法，因为它记录了使其工作所需的hack，此外它还适用于移动导航。

编辑-效果更好：

@media (min-width: 980px) {
  body {
    padding-top: 60px;
    padding-bottom: 42px;
  }
}
蛋蛋猿 2020.03.23

一个更方便的解决方案供您参考，它在我的所有项目中都非常完美：

从更改第一行

.navbar.navbar-fixed-top

至

.navbar.navbar-default.navbar-static-top

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android