bootstrap導航欄，自定義品牌掛圖像

Question

我想嘗試類似adobe掛在navabar的標誌。但我無法使用bootstrap來完成。

有什麼想法？

http://jsfiddle.net/EFTTp/1/

HTML：

<div class="navbar navbar-static-top"> 
    <div class="navbar-inner"> <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="index.html"> <img style="height:50px;" src="http://kpv.s3.amazonaws.com/static/img/logo.jpg"></a> 

     <div class="nav-collapse collapse"> 
      <ul class="nav pull-left"> 
       <li class="active"><a href="index.html" class="scroller">Home</a> 

       </li> 
       <li><a href="pricing.html" class="scroller">Pricing</a> 

       </li> 
       <li><a href="knowledge.html" class="scroller">FAQ</a> 

       </li> 
      </ul> 
     </div> 

Answer 1

入住這DEMO

試試這個CSS：
嘗試位置絕對的。
給予相對於父div的位置並給予子div絕對位置。

.navbar-inner{ 
    position:relative; 
    padding-left:70px; 
} 
.navbar .brand {     
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 50px; 
    background: #f00;   
    margin-left: 0px; 
    padding: 10px; 
}