Bootstrap css 将容器的一部分隐藏在导航栏导航栏固定顶部下方
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14735274/
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
Bootstrap css hides portion of container below navbar navbar-fixed-top
提问by Ajay Beniwal
I am building a project with Bootstrap and im facing little issue .I have a container below the Nav-top.My issue is that some portion of my container is hidden below the nav-top header.I dont want to use top-margin with container. Pls see below html in which im facing the issue
我正在使用 Bootstrap 构建一个项目，但我面临的问题很少。我在导航顶部下方有一个容器。我的问题是我的容器的某些部分隐藏在导航顶部标题下方。我不想使用顶部边距容器。请参阅下面的 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>
回答by Peter
This is handled by adding some paddingto the top of the <body>.
这是通过padding在<body>.
As per Bootstrap's documentation on .navbar-fixed-top, try out your own values or use our snippet below.Tip: By default, the navbaris 50pxhigh.
根据Bootstrap 上的文档.navbar-fixed-top，尝试您自己的值或使用我们下面的代码段。提示：默认navbar为50px高。
body {
padding-top: 70px;
}
Also, take a look at the source for this exampleand open starter-template.css.
另外，请查看此示例的源代码并打开starter-template.css.
回答by LuckyBrain
I guess the problem you have is related to the dynamic height that the fixed navbarat the top has. For example, when a user logs in, you need to display some kind of "Hello [User Name]" and when the name is too wide, the navbarneeds to use more height so this text doesn't overlap with the navbarmenu. As the navbarhas the style "position: fixed", the body stays underneath it and a taller part of it becomes hidden so you need to "dynamically" change the padding at the top every time the navbarheight changes which would happen in the following case scenarios:
我猜您遇到的问题与顶部固定导航栏的动态高度有关。例如，当用户登录时，您需要显示某种“您好[用户名]”，当名称太宽时，导航栏需要使用更多高度，因此该文本不会与导航栏菜单重叠。由于导航栏的样式为“ position: fixed”，身体停留在它的下方，并且它的较高部分变得隐藏，因此每次导航栏高度发生变化时，您都需要“动态”更改顶部的填充，这将在以下情况发生案例场景：
- The page is loaded / reloaded.
- The browser window is resized as this could hit a different responsive breakpoint.
- The navbarcontent is modified directly or indirectly as this could provoke a height change.
- 页面已加载/重新加载。
- 浏览器窗口会调整大小，因为这可能会遇到不同的响应断点。
- 所述导航栏的内容被直接或间接地修饰，因为这可能会引发高度改变。
This dynamicity is not covered by regular CSSso I can only think of one way to solve this problem if the user has JavaScriptenabled. Please try the following jQuerycode snippet to resolve case scenarios 1 and 2; for case scenario 3 please remember to call the function onResize()after any change in the navbarcontent:
常规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>回答by move.over
Just define an empty navbar prior to the fixed one, it will create the space needed.
只需在固定导航栏之前定义一个空的导航栏，它将创建所需的空间。
<nav class="navbar navbar-default ">
</nav>
<nav class="navbar navbar-default navbar-fixed-top ">
<div class="container-fluid">
// Your menu code
</div>
</nav>
回答by Praveen Puglia
It happens because with navbar-fixed-topclass the navbar gets the position:fixed. This in turns take the navbar out of the document flow leaving the body to take up the space behindthe navbar.
发生这种情况是因为在navbar-fixed-topclass 中，导航栏获得了position:fixed. 这反过来将导航栏从文档流中取出，让正文占据导航栏后面的空间。
You need to apply padding-topor margin-topto your container, based on your requirements with values >= 50px. (or play around with different values)
你需要申请padding-top或margin-top到你的container，根据你的要求加上值>= 50px。（或玩不同的值）
The basic bootstrap navbartakes height around 40px. So if you give a padding-topor margin-topof 50pxor more, you will always have that breathing space between your container and the navbar.
基本的引导程序导航栏的高度约为40px. 因此，如果您提供一个padding-top或margin-top多个50px或更多，您将始终在容器和导航栏之间拥有呼吸空间。
回答by Harvey Mushman
I too have had this problem but solved it without script and only using CSS. I start by following the recommended padding-top for a fixed menu by setting of 60px described on the Bootstrap website. Then I added three media tags that resize the padding at the cutoff points where my menu also resizes.
我也遇到过这个问题，但是没有脚本就解决了，只使用了 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>
One note, when my menu width is between 768 and 991, the menu logo in my layout plus the <li>options cause the menu to wrap to two lines. Therefore, I had to adjust the padding-top to prevent the menu from covering the content, hence 110px.
需要注意的是，当我的菜单宽度介于 768 和 991 之间时，布局中的菜单徽标加上<li>选项会导致菜单换行为两行。因此，我不得不调整 padding-top 以防止菜单覆盖内容，因此为 110px。
Hope this helps...
希望这可以帮助...
回答by Zorkind
I know this thread is old, but i just got into that exactly problem and i fixed it by just using the page-headerclass in my page, under the nav. Also i used the <nav>tag instead of <div>but i am not sure it would present any different behavior.
我知道这个线程很旧，但我刚刚遇到了那个问题，我通过page-header在我的页面中的导航下使用类来修复它。我也使用了<nav>标签而不是，<div>但我不确定它会呈现任何不同的行为。
Using the page-headeras a container for the page, you won't need to mess with the <body>, only if you disagree with the default space that the page-headergives you.
将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>回答by CruzDelSur
i solved it using jquery
我用jquery解决了它
<script type="text/javascript">
$(document).ready(function(e) {
var h = $('nav').height() + 20;
$('body').animate({ paddingTop: h });
});
</script>