Bootstrap 3 navbar將頂部菜單項固定爲圖像

我使用Bootstrap v3.3.6創建模板。這裏是我的模板的一部分：Bootstrap 3 navbar將頂部菜單項固定爲圖像

正如你可以看到我已經導航欄固定在頂部和我也有嵌入<li></li>標籤之間圖標或只是圖像的菜單項，用戶信息圖標和齒輪圖標。

我不確定的是，如果我正確地做到了這一點，我的意思是有一個特殊的類在bootstrap中，專門用於要插入圖像的菜單項。也許這些圖像不應該在那裏。

另一個問題是，如果我應該把我的標誌圖像放在<a class="navbar-brand"></a>裏面？如果我嘗試在高度超過導航欄高度的情況下插入更大的徽標圖像，則徽標圖像未正確居中。正確更改導航欄高度以及如何在導航欄中垂直居中放置圖像最簡單的方法是什麼？

（也許這就是太多的代碼，但是我想確保我的問題是不缺任何東西），其中兩個圖像插入導航項目相關

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <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="#">Workout.lt</a> 
    </div> 
    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li> 
      <a href="#">Vardenis Pavardenis</a> 
     </li> 
     <li> 
      <a href="#"><img src="images/user-info.png"></a> 
     </li> 
     <li> 
      <a href="#"><img src="images/user-gear.png"></a> 
     </li> 
     <li> 
      <a href="#">Services</a> 
     </li> 
     <li> 
      <a href="#">Atsijungti</a> 
     </li> 
     </ul> 
    </div> 
    <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav>

來源

2016-01-27 Erasus

Glyphicons或Font-awesome通常用於像這樣的圖像。 – Sam

要回答第二個問題只是一部分，我將圖像放在導航欄品牌錨點中，然後使用檢查器來調整導航欄的外觀。我將該CSS複製到覆蓋默認Bootstrap CSS的單獨文檔中。

<div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <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="#"><img src="../path/picture.jpg" alt="picture" height="90" width="180" /></a> 
    </div>

你的CSS會是這個樣子：

.nav-bar-brand { 
    height:90px; 
    width:100%; /*or whatever width you wanted*/ 
}

再次使用檢查員總是比試驗，然後上傳CSS文件更快。

來源

2016-01-27 15:16:12 ketchupisred

請提供演示您的建議的代碼示例。 – SnareChops

@SnareChops我添加了我的代碼示例。請反轉倒票。 – ketchupisred

謝謝。這是一個更高質量的答案。歡迎來到Stack Overflow。 – SnareChops

Bootstrap 3 navbar將頂部菜單項固定爲圖像

回答

相關問題