CSS 顶部导航栏阻止页面的顶部内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10336194/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
top nav bar blocking top content of the page
提问by GeekedOut
I have this Twitter Bootstrap code
我有这个 Twitter Bootstrap 代码
<div class='navbar navbar-fixed-top'>
<div class='navbar-inner'>
<div class='container'>
<a class='btn btn-navbar' data-target='.nav-collapse' data-toggle='collapse'>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</a>
<div class='nav-collapse'>
<ul class='nav'>
<li class='active'>
<a href='some_url'>My Home</a>
</li>
<li>
<a href='some_url'>Option 1 </a>
</li>
<li>
<a href='some_url'>Another option</a>
</li>
<li>
<a href='some_url'>Another option</a>
</li>
</ul>
</div>
</div>
</div>
</div>
But when I am viewing the beginning of the page, the nav bar is blocking some of the content that is near the top of the page. Any idea for how to make it push down the rest of the content lower when the top of the page is viewed so that the content isn't blocked by the nav bar?
但是当我查看页面的开头时，导航栏挡住了页面顶部附近的一些内容。关于如何在查看页面顶部时将其余内容向下推以便导航栏不会阻止内容的任何想法？
采纳答案by Akuta
Add to your CSS:
添加到您的 CSS：
body {
padding-top: 65px;
}
From the Bootstrap docs:
来自Bootstrap 文档：
The fixed navbar will overlay your other content, unless you add padding to the top of the body.
固定导航栏将覆盖您的其他内容，除非您在正文顶部添加填充。
回答by Spajus
Adding a padding like that is not enough if you're using responsive bootstrap. In this case when you resize your window you'll get a gap between top of the page and navbar. A proper solution looks like this:
如果您使用响应式引导程序，添加这样的填充是不够的。在这种情况下，当您调整窗口大小时，页面顶部和导航栏之间会出现间隙。正确的解决方案如下所示：
body {
padding-top: 60px;
}
@media (max-width: 979px) {
body {
padding-top: 0px;
}
}
回答by gtrak
For bootstrap 3, the class navbar-static-topinstead of navbar-fixed-topprevents this issue, unless you need the navbar to always be visible.
对于引导程序 3，除非您需要导航栏始终可见，否则该类navbar-static-top会navbar-fixed-top阻止此问题。
回答by catsky
a much more handy solution for your reference, it works perfect in all of my projects:
一个更方便的解决方案供您参考，它在我的所有项目中都能完美运行：
change your first 'div' from
改变你的第一个“div”
<div class='navbar navbar-fixed-top'>
to
到
<div class="navbar navbar-default navbar-static-top">
回答by Aram Paronikyan
I am using jQuery to solve this problem. This is the snippet for BS 3.0.0:
我正在使用 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);
});
回答by Jason Butler
I've had good success with creating a dummy non-fixed nav bar right before my real fixed nav bar.
我在我真正的固定导航栏之前创建了一个虚拟的非固定导航栏，取得了很大的成功。
<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
<!-- Nav bar details -->
</nav>
The spacing works out great on all screen sizes.
间距适用于所有屏幕尺寸。
回答by PiersB
In my project derived from the MVC 5 tutorialI found that changing the body padding had no effect. The following worked for me:
在我从MVC 5 教程派生的项目中，我发现更改 body padding 没有效果。以下对我有用：
@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;
}
}
It resolves the cases where the navbar folds into 2 or 3 lines. This can be inserted into bootstrap.css anywhere after the lines body { margin: 0; }
它解决了导航栏折叠成 2 或 3 行的情况。这可以插入到 bootstrap.css 行 body { margin: 0; 之后的任何位置。}
回答by Martijn Burger
回答by Nabil Kadimi
As seen on this examplefrom Twitter, add this before the line that includes the responsive styles declarations:
正如Twitter上的这个示例所示，在包含响应式样式声明的行之前添加以下内容：
<style>
body {
padding-top: 60px;
}
</style>
Like so:
像这样：
<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" />
回答by Eldiyar Talantbek
with navbar navbar-defaulteverything works fine, but if you are using navbar-fixed-topyou have to include custom style body { padding-top: 60px;} otherwise it will block content underneath.
使用navbar navbar-default一切正常，但如果您使用navbar-fixed-top，则必须包含自定义样式 body { padding-top: 60px;} 否则它会阻止下面的内容。
