Answers:
您的答案是正确的docs：
需要身体填充
固定的导航栏将覆盖您的其他内容，除非您将其添加
padding到的顶部<body>。试用您自己的值或使用下面的代码段。提示：默认情况下，导航栏的高度为50px。body { padding-top: 70px; }确保在核心Bootstrap CSS 之后添加此名称。
并在Bootstrap 4文档中...
固定的导航栏使用位置：固定，这意味着它们是从DOM的正常流程中拉出的，并且可能需要自定义CSS（例如上的padding-top）以防止与其他元素重叠。
正如其他人所说，在身体上添加填充顶部效果很好。但是，当您将屏幕变窄（以手机宽度为单位）时，导航栏和机身之间会出现间隙。同样，拥挤的导航栏可以包装到多行栏，再次覆盖某些内容。
这为我解决了这类问题
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
body { padding-top: 0px; }
}默认情况下，这会产生40px的填充，而在768px宽度以下时会填充0px（根据bootstrap的文档，这是将在其中创建间隙的手机布局截止点）
body { padding-top: 40px; }够了
一个更方便的解决方案供您参考，它在我的所有项目中都非常完美：
从更改第一行
.navbar.navbar-fixed-top至
.navbar.navbar-default.navbar-static-top这个问题是已知的，并且在twitter引导站点中有一种解决方法：
当您粘贴导航栏时，请记住考虑下面的隐藏区域。向中添加40px或更多的填充
<body>。确保将其添加到核心Bootstrap CSS之后和可选的响应CSS之前。
这为我工作：
body { padding-top: 40px; }@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上高度的CSS值，我只是用$('#main-navbar').height()，但在其他方面，这是非常有帮助，解决了我的问题，谢谢。
问题在于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>正如我在类似问题中发布的那样，我在真正的固定导航栏之前创建了一个虚拟的非固定导航栏取得了成功。
<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
<!-- Nav bar details -->
</nav>在所有屏幕尺寸上，间距都很好。
以前的所有解决方案都以一种或另一种方式将40像素专门硬编码到html或CSS中。如果导航栏包含其他字体大小或图像，该怎么办？如果我有充分的理由首先不弄乱身体填充怎么办？我一直在寻找解决此问题的方法，这是我想到的：
$(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>这样，主体的顶部填充会自动调整。
对于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;
}在nav标签内使用此类
class =“ navbar navbar-expand-lg navbar-light bg-light sticky-top ”
对于bootstrap 4
您要做的就是
@media (min-width: 980px) { body { padding-top: 40px; } } 除了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之前，则不会生效。