在导航栏固定顶部之前添加标题图像 [英] Adding a header image before navbar-fixed-top
问题描述
如何添加标题图像,使其显示在导航栏固定顶部的顶部.当用户向下滚动时,导航栏会停留在顶部?
我尝试将其添加到容器中,但没有按预期工作.
这是我目前的代码.
<标题><img src="header/1024x100.png"></标题><div class="container-fluid"><div class="navbar navbar-inverse navbar-fixed-top"><div class="navbar-inner"><div class="container-fluid"><a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><a class="brand" href="#"></a><div class="nav-collapse collapse"><p class="navbar-text pull-right">以<a href="#" class="navbar-link">用户名</a>登录</p><ul class="nav"><li class="active"><a href="#">首页</a></li><li><a href="#about">关于</a></li><li><a href="#contact">联系方式</a></li></div><!--/.nav-collapse -->
谢谢.
JsFiddle with scrolling nav 检查链接 一个>
注意:如果您的图片小于屏幕尺寸,请将此代码段插入到您的 css 中
.masthead img{宽度:100%;}
html 应如下所示:
<img src="http://placehold.it/940x150"/><!--/容器--><div class="navbar affix-top" data-spy="affix" data-offset-top="150"><div class="navbar-inner"><div class="容器"><ul class="nav"><li class="active"><a href="#">首页</a><li><a href="#">链接</a><li><a href="#">链接</a>