twitter-bootstrap 在导航栏固定顶部之前添加标题图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15105018/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding a header image before navbar-fixed-top
提问by John Doe
How do I add a header image so that it will appear on top of a navbar-fixed-top. And as the user scrolls down the navbar will stick to the top?
如何添加标题图像，使其显示在导航栏固定顶部的顶部。当用户向下滚动时，导航栏会粘在顶部吗？
I have tried adding it to a container but it does not work as expected.
我曾尝试将其添加到容器中，但没有按预期工作。
Here is my code so far.
到目前为止，这是我的代码。
<body>
<header>
<img src="header/1024x100.png">
</header>
<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">
Logged in as <a href="#" class="navbar-link">Username</a>
</p>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Thanks.
谢谢。
采纳答案by Shail
JsFiddle with scrolling nav check link
带有滚动导航检查链接的JsFiddle
Note: Incase your image is smaller than screen size,insert this snippet inside your css
注意：如果您的图片小于屏幕尺寸，请将此代码段插入到您的 css 中
.masthead img{
width:100%;
}
The html should look like the following :
html 应如下所示：
<div class="masthead">
<img src="http://placehold.it/940x150"/>
</div>
<!-- /container -->
<div class="navbar affix-top" data-spy="affix" data-offset-top="150">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
</ul>
</div>
</div>
</div>
<!-- navbar -->
<div class="container">
<div class="row-fluid">
<div class="span4">
content goes here
</div>
</div>
</div>
