Bootstrap css隐藏导航栏navbar-fixed-top下面的容器部分
我正在build立一个Bootstrap的项目，即时通讯面临小问题。我有一个容器下Nav-top.My的问题是，我的容器的一部分隐藏在导航顶部标题下。我不想使用顶部边距容器。 请参阅下面的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> 这是通过在<body>的顶部添加一些padding来处理的。
按照Bootstrap的.navbar-fixed-top文档 ， 尝试一下你自己的值或者使用下面的代码片断。 提示：默认情况下， navbar高度为50px 。
body { padding-top: 70px; }
另外，看看这个例子的源代码，并打开starter-template.css 。
我想你所遇到的问题与顶部的固定导航栏所具有的dynamic高度有关。 例如，当用户login时，需要显示某种“ Hello [用户名] ”，当名称太宽时， 导航栏需要使用更多的高度，所以该文本不会与导航栏菜单重叠。 由于导航栏的风格是“ position：fixed ”，所以身体会保持在其下方，而其中较高的部分会隐藏起来，所以您需要在每次导航栏高度发生变化时“dynamic”更改顶部的填充案例场景：
- 该页面被加载/重新加载。
- 浏览器窗口被resize，因为这可能会碰到不同的响应断点。
- 导航栏内容直接或间接修改，因为这可能会引起高度变化。
这种dynamic性不包含在普通的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>
只要在固定之前定义一个空的导航栏，它将创build所需的空间。
<nav class="navbar navbar-default "> </nav> <nav class="navbar navbar-default navbar-fixed-top "> <div class="container-fluid"> // Your menu code </div> </nav>
这是因为在navbar-fixed-top类中，navbar得到的position:fixed 。 这反过来将导航栏从文档stream中取出，离开主体，占据导航栏后面的空间。
您需要根据您的要求将值>= 50px值应用到container padding-top或margin-top 。 （或者玩弄不同的值）
基本的bootstrap 导航栏的高度约为40px 。 所以如果你给一个50px或者更多的padding-top或者margin-top ，你的容器和导航栏之间总是会有这个呼吸空间。
我知道这个线程是旧的，但我刚进入这个问题，我只是在我的页面，在导航下使用page-header类。 此外，我用<nav>标记而不是<div>但我不确定它会呈现任何不同的行为。
使用page-header作为page-header的容器，只有当你不同意page-header给你的默认空间的时候，你才不需要混淆<body> 。
<link href="ajax/libs/twitter-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>
我也有这个问题，但解决它没有脚本，只使用CSS。 我首先按照Bootstrap网站上介绍的设置60px的固定菜单，按照build议的填充顶部。 然后我添加了三个媒体标签，调整我的菜单也resize的截断点的填充。
<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。
希望这可以帮助…
我解决了它使用jQuery
<script type="text/javascript"> $(document).ready(function(e) { var h = $('nav').height() + 20; $('body').animate({ paddingTop: h }); }); </script>
