我想在 Bootstrap 中使用始终位于页面顶部的菜单栏。因此我使用了 navbar-fixed-top 类。我使用了这篇文章最后的代码，但遇到了内容可见性的问题
主要内容与菜单部分重叠。
关于 http://getbootstrap.com/examples/starter-template/通过在正文中添加 padding-top: 50px; 来“解决”这个问题。但这不起作用，当菜单环绕并变得大于 50px 时:
bootstrap 中是否有涵盖此问题的类？或者我是否必须添加一个 JavaScript 来监听窗口大小的变化并调整 padding-top？我不知道该怎么做，但这是我唯一想到的，...
代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<style>
h1 {
font-size: 5em;
}
body {
/*
padding-top: 50px;
*/
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<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="">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#item01">Item01</a></li>
<li><a href="#item02">Item02</a></li>
<li><a href="#item03">Item03</a></li>
<li><a href="#item04">Item04</a></li>
<li><a href="#item05">Item05</a></li>
<li><a href="#item06">Item06</a></li>
<li><a href="#item07">Item07</a></li>
<li><a href="#item08">Item08</a></li>
<li><a href="#item09">Item09</a></li>
<li><a href="#item10">Item10</a></li>
<li><a href="#item11">Item11</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container"">
<div>
<h1 id="about">My first template</h1>
<p class="lead">Dummy content, dummy content, dummy content, dummy content, dummy content, dummy content, dummy content, dummy content.</p>
<p class="lead">Dummy content, dummy content, dummy content, dummy content, dummy content, dummy content, dummy content, dummy content.</p>
<p class="lead">Dummy content, dummy content, dummy content, dummy content, dummy content, dummy content, dummy content, dummy content.</p>
</div>
<div id="contact" style="margin: 100em 0;">Contact us</div>
</div><!-- /.container -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
/* jQuery test. */
$(function() {
$('h1').html("Test");
});
</script>
</body>
</html>
最佳答案
我不知道有 Bootstrap 类可以解决这个问题。您当然可以像您提到的那样向窗口调整大小添加一个监听器。它会解决你的高度不总是 50px 的问题。应该是这样的:
$(window).on('resize', function(){
var navHeight = $('nav').height();
$('body').css('padding-top', navHeight + 'px');
});
这是未经测试的，但应该可以帮助您入门。希望这对您有所帮助!
关于javascript - Bootstrap 菜单覆盖页面内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28280732/