Twitter上的圖片橫幅引導標題

Question

我想在我的引導頁面上方有橫幅。我的代碼如下

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

.masthead img{ 
    width:100%; 
} 

Answer 1

它作爲背景更好。

.masthead{ 
    height://height of bg; 
    background-image:url("../images/gov-header.jpg"); 
    background-repeat:no-repeat; 
} 

希望這給你一些想法。你可以根據你想填滿整個寬度還是隻填充容器長度來修改。

更新 你必須改變

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 

到

<div class="navbar navbar-inverse" role="navigation"> 

見小提琴http://jsfiddle.net/NK6nh/3/