顶部导航栏阻止页面的顶部内容
我有这个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>
但是当我查看页面的开始时，导航栏阻止了页面顶部附近的一些内容。 当浏览页面的顶部时，如何使其余部分的内容向下推，以便内容不被导航栏阻止？
添加到您的CSS：
body {
padding-top: 65px;
}
从Bootstrap文档：
固定的导航栏将覆盖您的其他内容，除非您将填充添加到主体的顶部。
如果您使用响应式引导，那么添加这样的填充是不够的。 在这种情况下，当您调整窗口大小时，会在页面顶部和导航栏之间出现间隙。 适当的解决方案如下所示：
body {
padding-top: 60px;
}
@media (max-width: 979px) {
body {
padding-top: 0px;
}
}
对于引导程序3，类navbar-static-top代替navbar-fixed-top可防止此问题，除非您需要导航栏始终可见。