如何在移動設備的boostrap的中心顯示徽標？

Question

我想用twitter引導開發一個網站。我用一個形象的標誌在導航欄使用此代碼

<div class="navbar navbar-default navbar-static-top" role="navigation"> 

    <div class="navbar-header"> 

    <a class="navbar-brand" href="#"><img class="img-responsive" src="images/bradley.png" alt="" /></a> 
    </div> 

    <div> 
     <ul class="nav navbar-nav"> 
      <li class="home current-page"><a href="index.html">Swap</a></li> 
      <li class="episodes"><a href="tales.html">Tales</a></li> 
      <li class="about"><a href="about.html">About</a></li> 
      <li class="contact"><a href="contact.html">Contact</a></li> 
     </ul> 

    </div><!--/.nav-collapse --> 

    </div> 

這是確定的筆記本電腦。但對於移動設備和標籤，我希望這個標誌將成爲中心。請告訴我我該怎麼做？這是我的地盤https://dl.dropboxusercontent.com/u/168659703/project/index.html

Answer 1

.navbar-header { 
    margin: 0 auto; 
    display: table; 
    /* margin-right: 50px; */ remove this or add margin-right: auto !important; 
} 

http://jsfiddle.net/L64Pa/

Answer 2

.navbar-header 
{ 
    display:block; 
    text-align:center; 
} 

Answer 3

你可以做一個半 「黑客」 CSS樣式在main.css的文件，：

@media only screen and (max-device-width: 480px) { 
    .navbar-brand { 
     float:none !important; 
    } 
    .img-responsive { 
     margin:0 auto !important; 
     display:block !important; 
    } 
}