我在我的网站上使用bootstrap，我有导航栏固定顶部的问题。当我只是使用常规导航栏时，一切都很好。然而，当我尝试将它切换到导航栏固定顶部时，网站上的所有其他内容都向上移动，就像导航栏不存在一样，导航栏重叠了它。以下是我的基本思路:
.navbar.navbar-fixed-top
.navbar-inner
.container
.container
.row
//yield content
我试图复制bootstrap的例子，但仍然有这个问题，只有当使用导航栏固定顶部。我做错了什么?
当前回答
在nav标签中使用这个类
Class ="navbar navbar-expand-lg navbar-light bg-light sticky-top"
自举4
其他回答
要处理菜单栏中的换行，在导航栏上应用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>
这样，主体的顶部填充就会自动调整。
你的答案就在文件里
需要填充身体 固定的导航条将覆盖你的其他内容，除非你在<body>的顶部添加padding。尝试您自己的值或使用下面的代码片段。提示:默认情况下，导航栏的高度为50px。 Body {padding-top: 70px;｝ 确保在核心引导CSS之后包含它。
在Bootstrap 4文档中…
固定导航条使用位置:固定，意味着它们从 DOM的正常流程，可能需要自定义CSS(例如，填充顶部 上)，以防止与其他元素重叠。
这个问题是已知的，在twitter引导站点中有一个解决方案:
当你添加导航栏时，记住要考虑隐藏区域 在下面。为<body>添加40px或更多的填充。一定要加上 它在核心引导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);
});
