試圖在我的導航中添加一個徽標

我說實話，我可能錯過了一些東西。我試圖與引導3做的是有一個導航，看起來像這樣：試圖在我的導航中添加一個徽標

http://s24.postimg.org/a8bo7btol/Untitled.png

現在，我有我的HTML的基本結構和主要的問題是，當我縮小我的瀏覽器大約700像素寬的主導航停留在頂部，第二個導航結束在我的主導航下面（基本上 - 我的寬度被超過，一切都下降了）。

enter image description here

我的形象是374 X 45

這裏是不引導CSS：

body { 
    margin-top: 125px; 
} 
.nav { 
    margin-top: 28px; 
}

這是我的HTML ...

<nav role="navigation" class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button data-target=".navbar-ex1-collapse" data-toggle="collapse" class="navbar-toggle" type="button"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <!-- You'll want to use a responsive image option so this logo looks good on devices - I recommend using something like retina.js (do a quick Google search for it and you'll find it) --> 
      <a href="index.php" class="navbar-brand logo-nav"><img src="images/icon.png"></a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse navbar-ex1-collapse"> 
      <ul class="nav navbar-nav navbar"> 
      <li><a href="#about">About</a></li> 
      <li><a href="#services">Services</a></li> 
      <li><a href="#contact">Contact</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#about">About</a></li> 
      <li><a href="#services">Services</a></li> 
      <li><a href="#contact">Contact</a></li> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
     </div><!-- /.container --> 
    </nav>

我在我的智慧結束在這裏...我錯過了什麼？

來源

2013-12-12 user2124871

理想情況下，它應該保持在同一行上儘可能長，然後摺疊到導航按鈕。 – user2124871

我可以使用什麼樣的選項來保持圖像的大小，以保持大小的完整性？（如果這是一個選項） – user2124871

codehorse - 那篇文章非常好，非常豐富。我想我已經有了一些想法，包括修改標誌，當它縮小，實際上在我進行的短期測試中起作用。 – user2124871

與此更換你的外部CSS ...

body { 
margin-top: 125px; 
}  
.logo-nav { 
    padding: 5px 0px; 
} 
.logo-nav img{ 
    width:254px; 
    height: auto; 
}

這將會使事情的工作。您可以使用填充來控制徽標上方的空間，只要確保其大小不超過總計50像素（總填充+徽標的計算高度）即可。在這種情況下，您可以減少徽標的寬度或增加導航欄的高度。你可以通過接受正確答案來表示感謝。

來源

2013-12-12 05:07:47 ravisuhag

嗨 - 感謝您的幫助！但最終的結果是一樣的。添加你提供的CSS讓我處於完全相同的困境。但是，可能會在我的最後，我會仔細檢查。只是不想讓你掛起（對不起，個人生活中出現了一些東西）。 – user2124871

試圖在我的導航中添加一個徽標

回答

相關問題