我正在使用Bootstrap建立一个项目，我面临的问题很小。我在Nav-top下面有一个容器。我的问题是我的容器的某些部分隐藏在导航顶部标题下面。我不想使用顶部-margin与容器。请参阅下面的html，即我面临的问题
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="~/stylesheets/bootstrap.css"/>
<link rel="stylesheet" href="~/stylesheets/bootstrap-responsive.css"/>
</head>
<body>
<div class="navbar navbar-fixed-top ">
<div class="navbar-inner">
<div class="container">
<button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse"><ul class="nav" id="navbar"><li ng-class="{active:section=='plunks'}" class="active"><a href="/plunks/trending"><i class="icon-home"></i>Home</a></li><li><a target="_self" href="/edit/"><i class="icon-calendar"></i>General Election 2014</a></li><li class="divider-vertical">
</li><li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">
<i class="icon-eye-open">
</i>Assembly Elections
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#/HTML5Apps">Assembly Elections 2013</a></li>
</ul>
</li><li class="divider-vertical">
</li><li ng-class="{active:section=='tags'}"><a href="/tags"><i class="icon-th"></i>Constituecy</a></li><li ng-class="{active:section=='discuss'}"><a href="/discuss"><i class="icon-time"></i>Election News</a></li><li class="divider-vertical"></li><li><a href="https://github.com/filearts/plunker"><i class="icon-bell"></i>Candidate</a></li></ul></div>
</div>
</div>
</div>
<div class="container" >
<ul class="nav nav-pills">
<li class="active">
<a href="#">Popular</a>
</li>
<li><a href="#">Trending</a></li>
<li><a href="#">Latest</a></li>
</ul>
</div>
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/bootstrap-dropdown.js"></script>
<script src="~/Scripts/Collapse.js"></script>
</body>
</html>
答案 0 :(得分：192)
通过在padding的顶部添加一些<body>来处理此问题。
根据Bootstrap's documentation on .navbar-fixed-top，尝试使用自己的值或使用下面的代码段。提示：默认情况下，navbar为50px高。
body {
padding-top: 70px;
}
另外，请查看this example的来源并打开starter-template.css。
答案 1 :(得分：29)
我猜你遇到的问题与顶部固定导航栏的动态高度有关。例如，当用户登录时，您需要显示某种“ Hello [用户名] ”，当名称太宽时，导航栏需要使用更高的高度，因此此文本不会与导航栏菜单重叠。由于导航栏的样式为“ position：fixed ”，因此正文位于其下方，其中较高的部分会隐藏，因此您需要“动态”更改填充每次导航栏高度发生变化时，顶部会出现以下情况：
常规 CSS 不包含这种动态性，因此如果用户启用了 JavaScript ，我只能想到解决此问题的一种方法。请尝试使用以下 jQuery 代码段来解决案例场景1和2;对于案例场景3，请记住在导航栏内容中的任何更改后调用 onResize（）函数：
var onResize = function() {
// apply dynamic padding at the top of the body according to the fixed navbar height
$("body").css("padding-top", $(".navbar-fixed-top").height());
};
// attach the function to the window resize event
$(window).resize(onResize);
// call it also when the page is ready after load or reload
$(function() {
onResize();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
答案 2 :(得分：16)
只需在固定导航栏之前定义一个空导航栏，它就会创建所需的空间。
<nav class="navbar navbar-default ">
</nav>
<nav class="navbar navbar-default navbar-fixed-top ">
<div class="container-fluid">
// Your menu code
</div>
</nav>
答案 3 :(得分：8)
之所以发生这种情况，是因为navbar-fixed-top类的导航栏会获得position:fixed。这又将导航栏从文档流中移出，使主体占据后面导航栏的空间。
您需要根据您对值padding-top的要求，将margin-top或container应用于>= 50px。 （或玩弄不同的价值观）
基本引导导航栏占据 40px 的高度。因此，如果您提供<{1>}或padding-top margin-top 或更多，那么容器和导航栏之间将始终存在喘息空间。< / em>
答案 4 :(得分：6)
我也遇到过这个问题但是没有脚本就解决了它，只使用了CSS。我首先按照Bootstrap网站上描述的60px的设置，按照推荐的padding-top进行固定菜单。然后我添加了三个媒体标签，在我的菜单也调整大小的截止点处调整填充大小。
<style>
body{
padding-top:60px;
}
/* fix padding under menu after resize */
@media screen and (max-width: 767px) {
body { padding-top: 60px; }
}
@media screen and (min-width:768px) and (max-width: 991px) {
body { padding-top: 110px; }
}
@media screen and (min-width: 992px) {
body { padding-top: 60px; }
}
</style>
请注意，当我的菜单宽度介于768和991之间时，我的布局中的菜单徽标加上<li>选项会导致菜单换行到两行。因此，我不得不调整填充顶部以防止菜单覆盖内容，因此110px。
希望这会有所帮助......
答案 5 :(得分：6)
我知道这个帖子已经老了，但我刚刚遇到了这个问题，我只是在我的页面中使用导航下的page-header类来修复它。我还使用了<nav>代码而不是<div>，但我不确定它是否会出现任何不同的行为。
使用page-header作为页面的容器，只有在您不同意<body>为您提供的默认空间时，您才需要使用page-header。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bootstrap</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<div class="navbar-right">
</div>
</div>
</nav>
</div>
<div class="page-header">
<div class="clearfix">
<div class="col-md-12">
<div class="col-md-8 col-sm-6 col-xs-12">
<h1>Registration form <br /><small>A Bootstrap template showing a registration form with standard fields</small></h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<form role="form">
<div class="col-lg-6">
<div class="well well-sm"><strong><span class="glyphicon glyphicon-asterisk"></span>Required Field</strong></div>
<div class="form-group">
<label for="InputName">Enter Name</label>
<div class="input-group">
<input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<div class="form-group">
<label for="InputEmail">Enter Email</label>
<div class="input-group">
<input type="email" class="form-control" id="InputEmailFirst" name="InputEmail" placeholder="Enter Email" required>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<div class="form-group">
<label for="InputEmail">Confirm Email</label>
<div class="input-group">
<input type="email" class="form-control" id="InputEmailSecond" name="InputEmail" placeholder="Confirm Email" required>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<div class="form-group">
<label for="InputMessage">Enter Message</label>
<div class="input-group">
<textarea name="InputMessage" id="InputMessage" class="form-control" rows="5" required></textarea>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info pull-right">
</div>
</form>
</div>
答案 6 :(得分：2)
我用jquery
解决了这个问题
<script type="text/javascript">
$(document).ready(function(e) {
var h = $('nav').height() + 20;
$('body').animate({ paddingTop: h });
});
</script>
答案 7 :(得分：2)
如果您使用 Bootstrap 5 并希望导航栏位于顶部，请将 fixed-top 替换为 sticky-top。
解决导航栏下隐藏数据的问题。