引导 CSS 隐藏导航栏下面的容器部分-固定顶部

我建立一个项目与 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>
166266 次浏览
小开
最佳答案

这是通过在 <body>的顶部添加一些 padding来处理的。

根据 Bootstrap 关于 .navbar-fixed-top的文档，尝试你自己的价值观或使用我们下面的片段。提示: 默认情况下，navbar是 50px高。

  body {
padding-top: 70px;
}

另外，查看 这个例子的源代码并打开 starter-template.css。

小开

之所以会发生这种情况，是因为对于 navbar-fixed-top类，导航栏将获得 position:fixed。这依次将导航栏从文档流中取出，离开主体，占用 后面导航栏的空间。

您需要将 padding-top或 margin-top应用到您的 container，基于您的需求，值为 >= 50px。(或玩弄不同的价值观)

基本的引导 Navbar需要在 40px附近的高度。因此，如果你给 padding-top或 margin-top的 50px或更多，你将始终有你的 容器和导航栏。之间的呼吸空间

小开

我想你的问题是有关的动态高度，固定 Navbar在顶部有。例如，当用户登录时，您需要显示某种类型的“ 你好[用户名]”，当名称太宽时，Navbar需要使用更高的高度，这样该文本就不会与 Navbar菜单重叠。由于 Navbar的风格是“ 位置: 固定”，车身在它的下面，高的部分隐藏起来，所以每次 Navbar高度变化时，你需要“动态”改变顶部的填充，这在以下情况下会发生:

  1. 页面已加载/重新加载。
  2. 浏览器窗口的大小会随之调整，因为它可能会触发不同的响应断点。
  3. Navbar内容是直接或间接修改的，因为这可能引起高度变化。

这种动态性不包括在常规的 CSS中，所以我只能想到一种方法来解决这个问题，如果用户启用了 JavaScript。请尝试以下 JQuery代码片段来解决案例场景1和2; 对于案例场景3，请记住在 Navbar内容发生任何变化后调用函数 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>

小开

只要在固定导航栏之前定义一个空导航栏，就可以创建所需的空间。

<nav class="navbar navbar-default ">
</nav>
<nav class="navbar  navbar-default navbar-fixed-top ">
<div class="container-fluid">
// Your menu code
</div>
</nav>
小开

我也有这个问题，但解决它没有脚本，只使用 CSS。我开始按照推荐的填充顶部的一个固定菜单设置60像素的 Bootstrap 网站上描述。然后，我添加了三个媒体标签，可以在我的菜单也可以调整大小的临界点调整填充大小。

<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。

希望这个能帮上忙。

小开

我知道这个线程是旧的，但我刚刚进入，正是这个问题，我修复了它，只是使用 page-header类在我的页面，在导航下。另外，我使用的 <nav>标签，而不是 <div>，但我不确定它会表现出任何不同的行为。

使用 page-header作为页面的容器，只有当您不同意 page-header给您的默认空间时，才不需要改变 <body>。

<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>

小开

我用 jquery 解出来的

<script type="text/javascript">
$(document).ready(function(e) {
var h = $('nav').height() + 20;
$('body').animate({ paddingTop: h });
});
</script>

小开

如果您正在使用 Bootstrap 5，并希望在顶部的导航栏，然后取代 fixed-top与 sticky-top。

导航条下隐藏数据问题的解决。

小开

简单:

代码(JS)

document.addEventListener("DOMContentLoaded", function(){
navbar_height = document.querySelector('.navbar').offsetHeight; //get the offset height
document.body.style.paddingTop = navbar_height + 'px'; // Add the offset height to the top padding
});

由于类导航栏不存在，StackOverflow 抛出一个错误。


提交答案