Html Twitter 引导程序标题上方的图像横幅
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21141322/
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
Image banner above Twitter bootstrap header
提问by Kern Elliott
I would like to have a banner above my bootstrap page. My code is below
我想在我的引导页面上方有一个横幅。我的代码在下面
HTML
HTML
<div class="masthead">
<img src="images/gov-header.jpg"/>
</div>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">MST</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="content.html">Divisions</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#faqs">FAQs</a></li>
<li><a href="#resources">Resources</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
CSS
CSS
.masthead img{
width:100%;
}
回答by Emmanuel John
Its better as a background.
最好作为背景。
.masthead{
height://height of bg;
background-image:url("../images/gov-header.jpg");
background-repeat:no-repeat;
}
Hope this gives you some ideas. You can modify this depending on if you want to fill the whole width or just container length.
希望这能给你一些想法。您可以根据是要填充整个宽度还是仅填充容器长度来修改它。
UpdateYou have to change
更新你必须改变
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
to
到
<div class="navbar navbar-inverse" role="navigation">
See the fiddle http://jsfiddle.net/NK6nh/3/
