我正在尝试制作我的第一个引导网站。让我感到困惑的是静态导航栏不会随页面滚动的原因。这是代码。我将包括整个标题,以防下面的jumbotron正在做我看不到的事情。
<header>
<nav class="navbar navbar-default navbar-static-top" id="site-nav" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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" id="site-brand" href="#">Josef Roy Advincula</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#about-me" class="jlinks"><span class="glyphicon glyphicon-user"></span>About Me</a></li>
<li><a href="#" class="jlinks"><span class="glyphicon glyphicon-paperclip"></span>Portfolio</a></li>
<li><a href="#" class="jlinks"><span class="glyphicon glyphicon-phone"></span>Contact Me</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="jumbotron">
<div class="container">
<img src="img/profile_pic.jpg" class="img-responsive img-circle" alt="Josef Roy Advincula"/>
<hgroup>
<h1 class="text-center jumbo-header">Hi! I'm Josef</h1>
<h2 class="text-center jumbo-header">{ Web Developer/Programmer }</h2>
</hgroup>
</div>
</div>
</header>
答案 0 :(得分:2)
抱歉,我误解了这些文件。通过使用
解决了该问题<nav role="navigation" class="navbar navbar-default navbar-fixed-top">