Twitter Bootstrap – 顶部导航栏阻止页面的顶部内容
我有这个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文档 ：
固定的导航栏将覆盖您的其他内容，除非您将填充添加到主体的顶部。
如果使用响应式引导程序，那么添加这样的填充是不够的。 在这种情况下，当您调整窗口大小时，会在页面顶部和导航栏之间产生空隙。 一个适当的解决scheme如下所示：
body { padding-top: 60px; } @media (max-width: 979px) { body { padding-top: 0px; } }
对于引导3，类navbar-static-top而不是navbar-fixed-top可以防止这个问题，除非你需要navbar始终可见。
一个更方便的解决scheme供您参考，它适用于我所有的项目：
改变你的第一个'div'
<div class='navbar navbar-fixed-top'>
至
<div class="navbar navbar-default navbar-static-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之后的任何位置，直线体{margin：0; }
我在创build一个虚拟的非固定导航栏之前，我的真正的固定导航栏取得了很好的成功。
<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar --> <nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar --> <!-- Nav bar details --> </nav>
在所有的屏幕尺寸上，这个间距都很好。
从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" />
与navbar导航栏默认一切正常，但如果您使用导航栏固定顶部，你必须包括自定义样式正文{padding-top：60px;}否则它会阻止下面的内容。
使用MVC 5，我修正了我的方式，只是简单地添加我自己的Site.css，加载其他人，用下面的行： body{padding: 0}
我在_Layout.cshtml的开头改变了代码：
<body> <div class="navbar navbar-inverse navbar-static-top"> <div class="container"> @if (User.Identity.IsAuthenticated) { <div class="top-navbar">
使用percentage比pixels更好的解决scheme。
body { padding-top: 10%; //This works regardless of display size. }
如果需要，您可以通过添加不同的breakpoints如@spajus另一个答案中@spajus
引导版v4 初学者模板css使用：
body { padding-top: 5rem; }
你应该添加
#page { padding-top: 65px }
不要摧毁粘脚或别的东西
<div class='navbar' data-spy="affix" data-offset-top="0">
如果您的导航栏最初位于页面顶部，请将该值设置为0.否则，请将data-offset-top的值设置为导航栏上方内容的值。
同时，你需要修改这样的css ：
.affix{ width:100%; top:0; z-index: 10; }
