小开

最佳答案

添加到你的CSS:

body {
padding-top: 65px;
}

从引导文档:

固定的导航条会覆盖你的其他内容，除非你在正文的顶部添加填充。

小开

如果使用响应式引导，添加这样的填充是不够的。在这种情况下，当你调整窗口大小时，你会在页面顶部和导航栏之间得到一个间隙。正确的解决方案是这样的:

body {
padding-top: 60px;
}
@media (max-width: 979px) {
body {
padding-top: 0px;
}
}

小开

你应该加上

#page {
padding-top: 65px
}

为了不破坏粘性页脚或其他东西

小开

正如在Twitter的这个例子中所看到的，将此添加到包含响应式样式声明的行之前:

<style>
body {
padding-top: 60px;
}
</style>

像这样:

<link href="Z/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
body {
padding-top: 60px;
}
</style>
<link href="Z/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />

小开

对于引导3，类navbar-static-top而不是navbar-fixed-top防止了这个问题，除非你需要导航栏始终可见。

小开

我使用jQuery来解决这个问题。这是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);
});

小开

在我从MVC 5教程派生的项目中，我发现改变主体填充没有效果。下面的方法对我很有效:

@media screen and (min-width:768px) and (max-width:991px) {
body {
margin-top:100px;
}
}
@media screen and (min-width:992px) and (max-width:1199px) {
body {
margin-top:50px;
}
}

它解决了导航栏折叠成2或3行的情况。这可以插入到bootstrap.css行之后的任何位置身体{ 保证金:0; } < / p >

小开

编辑:此解决方案不适用于Bootstrap的新版本，其中navbar-inverse和navbar-static-top类不可用。

使用MVC 5，我修复我的方式，是简单地添加我自己的Site.css，在其他人之后加载，用下面的行: body{padding: 0} < / p >

并且我改变了_Layout开始的代码。Cshtml，为:

<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
@if (User.Identity.IsAuthenticated) {
<div class="top-navbar">

小开

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

更改您的第一个“div”

<div class='navbar navbar-fixed-top'>

来

<div class="navbar navbar-default navbar-static-top">

小开

<div class='navbar' data-spy="affix" data-offset-top="0">

如果您的导航栏最初位于页面的顶部，则将该值设置为0。否则，将__abc0的值设置为导航栏上方内容的值。

同时，你需要像这样修改css:

.affix{
width:100%;
top:0;
z-index: 10;
}

小开

我已经很成功地创建了一个虚拟的非固定导航栏在我真正的固定导航栏之前。

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

这种间距在所有屏幕尺寸上都很适用。

小开

使用percentage是比pixels更好的解决方案。

body {
padding-top: 10%; //This works regardless of display size.
}

如果需要，仍然可以显式地添加不同的breakpoints，正如在另一个@spajus回答中提到的那样

小开

使用导航条navbar-default一切正常，但如果你使用navbar-fixed-top，你必须包括自定义样式体{padding-top: 60px;}，否则它将阻塞下面的内容。

小开

引导v4 入门模板CSS使用:

body {
padding-top: 5rem;
}

小开

这里会出现两个问题:

页面加载(内容隐藏)
像这样的内部链接会滚动到顶部，并被导航栏隐藏:

<nav>...</nav>              <!-- 70 pixels tall -->
<a href="#hello">hello</a>  <!-- click to scroll down -->
<hr style="margin: 100px">
<h1 id="hello">World</h1>   <!-- Help!  I'm 70 pixels hidden! -->

引导4 w/内部页面链接

为了修复1)，正如Martijn Burger上面所说，bootstrap v4 starter模板css使用:

body {
padding-top: 5rem;
}

要修复2)检查这个问题。这段代码大部分工作(但不是第二次点击相同的哈希):

window.addEventListener("hashchange", function() { scrollBy(0, -70) })

这段代码用jQuery动画链接(不是slim jQuery):

  // inline theme global code here
$(document).ready(function() {
var body = $('html,body'), NAVBAR_HEIGHT = 70;
function smoothScrollingTo(target) {
if($(target)) body.animate({scrollTop:$(target).offset().top - NAVBAR_HEIGHT}, 500);
}
$('a[href*=\\#]').on('click', function(event){
event.preventDefault();
smoothScrollingTo(this.hash);
});
$(document).ready(function(){
smoothScrollingTo(location.hash);
});
})

小开

您可以根据屏幕分辨率设置空白

@media screen and (min-width:768px) and (max-width:991px) {
body {
margin-top:100px;
}


@media screen and (min-width:992px) and (max-width:1199px) {
body {
margin-top:50px;
}
}


body{
padding-top: 10%;
}


#nav{
position: fixed;
background-color: #8b0000;
width: 100%;
top:0;
}

小开

添加到你的JS:

jQuery(document).ready(function($) {
$("body").css({
'padding-top': $(".navbar").outerHeight() + 'px'
})
});

小开

到目前为止，我发现的最好的解决方案，不涉及硬编码高度和断点是在标记中添加一个额外的<nav...标记。

<nav class="navbar navbar-expand-md" aria-hidden="true">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Navbar</a>

通过这样做，@media断点是相同的，高度是相同的(前提是你的navbar-brand是navbar中最高的对象，但你可以很容易地替换非fixed-top导航栏中的另一个元素。

这种失败的地方是屏幕阅读器，现在将显示2 navbar-brand元素。这表明需要not-for-sr类来防止该元素显示给屏幕阅读器。然而，该类并不存在https://getbootstrap.com/docs/4.0/utilities/screenreaders/

我已经尝试用aria-hidden="true"来补偿屏幕阅读器的问题，但https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/似乎表明，当屏幕阅读器处于聚焦模式时，这可能不会工作，当然，这是你真正需要它工作的唯一时间……

小开

添加:

.navbar {
position: relative;
}

小开

你可以使用.stick-top，它可以完成同样的工作，在滚动时将导航条固定在顶部，而无需添加任何css填充

<div class="container-fluid mt-3">
<nav class="navbar navbar-expand-sm bg-white navbar-light sticky-top pt-0">
<a class="navbar-brand" href="/">
<img src="/images/logo-full.png" alt="logo" width="150">
</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
</ul>
</nav>
<div class="row">
.....
</div>
</div>

顶部导航条阻止页面顶部内容

引导4 w/内部页面链接