Bootstrap 3固定導航 - 隱藏/調整標誌

Question

使用最新版本的Bootstrap，我想用徽標替換品牌區域文本。在我的桌面上，它看起來非常完美，在我的iPhone上，徽標出現在小摺疊菜單下，而它應該位於其旁邊（左側）。如果我將徽標縮小，它在iPhone上可以正常工作，但對於桌面版網站而言，小徽標太小。我認爲通過將img-responsive類添加到徽標中，它會相應縮小，但是失敗。如果你想複製這個，徽標是276px寬40px高。

在水平方向上，一切都顯得很好（當在垂直方向觀看時，這自然是大多數人拿着手機的一種問題）。

下面是相關的代碼（您會注意到底部附近有一個購買按鈕，這會自動隱藏在iPhone上，如果沒有其他選項，該按鈕就可以滿足標識）。請注意，最終的解決方案是根據屏幕尺寸收縮徽標。

<!-- Fixed navbar --> 
    <div class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="index.php"><img class="img-responsive" src="img/logo.png" alt=""></a> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="index.php">Home</a></li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Application <b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="features.php">Features</a></li> 
          <li><a href="screenshots.php">Screenshots</a></li> 
          <li><a href="demos.php">Demos</a></li> 
          <li class="divider"></li> 
          <li><a href="purchase.php">Purchase</a></li> 
          <li><a href="licensing.php">Licensing Model</a></li> 
         </ul> 
        </li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Documentation <b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="documentation.php#tab1">Version Info</a></li> 
          <li><a href="documentation.php#tab2">System Requirements</a></li> 
          <li class="divider"></li> 
          <li><a href="documentation.php#tab3">Installation Guide</a></li> 
          <li><a href="documentation.php#tab4">Integration Guide</a></li> 
          <li><a href="documentation.php#tab5">Frontdesk Manual</a></li> 
         </ul> 
        </li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Support <b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="/support/knowledgebase.php">Knowledgebase</a></li> 
          <li><a href="/support/index.php?a=add">Submit Ticket</a></li> 
          <li><a href="/support/ticket.php">View Ticket Status</a></li> 
          <li class="divider"></li> 
          <li><a href="services.php#tab1">Installation Service</a></li> 
          <li><a href="services.php#tab2">Development Services</a></li> 
         </ul> 
        </li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact <b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="faq.php">Presales Questions</a></li> 
          <li><a href="contact.php">Contact Us</a></li> 
         </ul> 
        </li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Legal <b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="legal.php#tab1">Privacy Policy</a></li> 
          <li><a href="legal.php#tab2">Terms of Use</a></li> 
          <li><a href="legal.php#tab3">Site Security</a></li> 
          <li class="divider"></li> 
          <li><a href="legal.php#tab4">Money Back Guarantee</a></li> 
         </ul> 
        </li> 
       </ul> 
       <a href="purchase.php"><button type="button" class="btn btn-success" style="margin-top: 8px; margin-left: 30px;">Purchase</button></a> 
      </div> 
      <!--/.nav-collapse --> 

Answer 1

把你的形象在CSS背景與背景大小：蓋。

Answer 2

這可修復出現在摺疊菜單圖標下的品牌徽標的I-phone問題。你可能會根據您的設置與寬度玩了一下：

@media (max-width: 500px) { 
    .navbar-brand{ 
    width:60%; 
    } 
}