我在我的网站上使用引导程序，但导航栏固定顶部有问题。当我只使用常规导航栏时，一切都很好。但是，当我尝试将其切换到导航栏固定顶部时，网站上的所有其他内容都会向上移动，就像导航栏不存在并且导航栏与其重叠一样。这基本上是我的布局：
.navbar.navbar-fixed-top
.navbar-inner
.container
.container
.row
//yield content
我尝试完全复制引导程序示例，但仅在使用导航栏固定顶部时仍然存在此问题。我做错了什么？
【问题讨论】：
你的答案就在docs：
需要身体填充
固定导航栏将覆盖您的其他内容，除非您将
padding添加到<body>的顶部。试试你自己的价值观或使用我们下面的 sn-p。提示：默认情况下，导航栏的高度为 50px。body { padding-top: 70px; }确保将这个放在核心 Bootstrap CSS 之后。
在 Bootstrap 4 文档中...
固定导航栏使用位置：固定，这意味着它们是从 DOM 的正常流程，可能需要自定义 CSS（例如 padding-top ) 以防止与其他元素重叠。
【讨论】：
正如其他人所说，为 body 添加 padding-top 效果很好。 但是，当您使屏幕变窄（到手机宽度）时，导航栏和主体之间会出现间隙。此外，拥挤的导航栏可以换成多行栏，再次覆盖部分内容。
这为我解决了这些问题
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
body { padding-top: 0px; }
}
默认情况下填充 40 像素，宽度低于 768 像素时为 0 像素（根据引导程序的文档，这是将创建间隙的手机布局截止）
【讨论】：
body { padding-top: 40px; } 就足够了
一个更方便的解决方案供您参考，它在我的所有项目中都很完美：
改变你的第一行
.navbar.navbar-fixed-top
到
.navbar.navbar-default.navbar-static-top
【讨论】：
只需将fixed-top 更改为sticky-top。这样您就不必计算填充。
它有效！
【讨论】：
Also note that .sticky-top uses position: sticky, which isn’t fully supported in every browser. 见 - getbootstrap.com/docs/4.5/components/navbar/#placement
@Ryan，你是对的，对高度进行硬编码会使其在自定义导航栏的情况下无法正常工作。这是我愉快地用于 BS 3.0.0 的代码：
$(window).resize(function () {
$('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});
$(window).load(function () {
$('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});
【讨论】：
parseInt，而是使用$('#main-navbar').height()，但否则这非常有帮助并解决了我的问题，谢谢。
这个问题是已知的，在 twitter 引导站点中有一个解决方法：
贴上导航栏时，记得考虑隐藏区域 下。为
<body>添加 40 像素或更多的内边距。务必添加 这在核心 Bootstrap CSS 之后和可选响应之前 CSS。
这对我有用：
body { padding-top: 40px; }
【讨论】：
Bootstrap 4 的解决方案，它在我所有的项目中都能完美运行：
改变你的第一行
navbar-fixed-top
到
sticky-top
Bootstrap documentation reference
是时候他们做对了：D
【讨论】：
我把这个放在 yield 容器之前：
<div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;"> </div>
我喜欢这种方法，因为它记录了让它工作所需的 hack，而且它也适用于移动导航。
编辑 - 这效果更好：
@media (min-width: 980px) {
body {
padding-top: 60px;
padding-bottom: 42px;
}
}
【讨论】：
正如我在一个类似问题中发布的那样，我在真正的固定导航栏之前创建了一个虚拟的非固定导航栏，取得了很大的成功。
<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
<!-- Nav bar details -->
</nav>
间距适用于所有屏幕尺寸。
【讨论】：
问题在于 navbar-fixed-top，除非指定 body-padding，否则它将覆盖您的内容。此处提供的解决方案没有在 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>
【讨论】：
所有以前的解决方案都以一种或另一种方式将 40 像素专门硬编码到 html 或 CSS 中。如果导航栏包含不同的字体大小或图像怎么办？如果我有充分的理由不首先弄乱 body 填充怎么办？我一直在寻找解决这个问题的方法，这是我想出的：
$(document).ready(function(){
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
$(window).resize(function(){
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
});
您可以通过调整“1”来向上或向下移动它。无论导航栏中内容的大小，在调整大小之前和之后，它似乎都对我有用。
我很好奇其他人对此有何看法：请分享您的想法。 （顺便说一句，它将被重构为不重复。）除了使用 jQuery 之外，还有其他原因不以这种方式解决问题吗？我什至可以使用这样的辅助导航栏：
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
+ $('.admin-nav').height() + 1 )+'px'});
PS：以上是在 Bootstrap 2.3.2 上——它会在 3.x 中工作吗只要通用类名仍然存在......事实上，它应该独立于引导程序工作，对吗？
编辑：这是一个完整的 jquery 函数，它处理两个堆叠的、响应式的动态大小的固定导航栏。它需要 3 个 html 类（或者可以使用 id）：user-top、admin-top 和 contentwrap：
$(document).ready(function(){
$('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
$('.contentwrap') .css({'padding-top': (
$('.user-top').height()
+ $('.admin-top').height()
+ 0 )+'px'
});
$(window).resize(function(){
$('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
$('.contentwrap') .css({'padding-top': (
$('.user-top').height()
+ $('.admin-top').height()
+ 0 )+'px'
});
});
【讨论】：
要处理菜单栏中的换行，请将 id 应用于导航栏，如下所示：
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="topnavbar">
并在包含 jquery 后在头部添加这个小脚本，如下所示：
<script>
$(document).ready(function(){
$(document.body).css('padding-top', $('#topnavbar').height() + 10);
$(window).resize(function(){
$(document.body).css('padding-top', $('#topnavbar').height() + 10);
});
});
</script>
这样，主体的顶部填充会自动调整。
【讨论】：
在导航标签中使用这个类
class="navbar navbar-expand-lg navbar-light bg-light sticky-top"
对于引导程序 4
【讨论】：
对于 Bootstrap 3.+ ，我将使用以下 CSS 来修复 navbar-fixed-top 和锚点跳转重叠问题，基于 https://github.com/twbs/bootstrap/issues/1768
/* 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;
}
【讨论】：
你要做的就是
@media (min-width: 980px) { body { padding-top: 40px; } }
【讨论】：
对于 Nick Bisby 的回答，如果您在 Rails 中使用 HAML 遇到此问题，并且您已在此处应用了 Roberto Barros 的修复：
我将“bootstrap_and_overrides.css”中的require替换为：
=需要 twitter-bootstrap-static/bootstrap.css.erb
（见https://github.com/seyhunak/twitter-bootstrap-rails/issues/91）
...你需要将body CSS 放在 require 语句之前，如下所示：
@import "twitter/bootstrap/bootstrap";
body { padding-top: 40px; }
@import "twitter/bootstrap/responsive";
=require twitter-bootstrap-static/bootstrap.css.erb
如果require语句在body CSS之前，则不会生效。
【讨论】：
我会这样做：
// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }
这应该确保导航块不会向下延伸并覆盖页面内容。
【讨论】：
这很有效，对我来说看起来不错。
<body class="pt-5 mt-4">....</body>
【讨论】：
我只是将导航栏包裹在一个
中<div width="100%">
<div class="nav-? ??">
...
</nav>
</div>
没有花哨的恶作剧，但它有效..
【讨论】：
nav-? ?? 代表什么？