Bootstrap 3.0將導航欄和徽標對齊到底

我目前在導航欄的右側有一個徽標（代碼如下）如何讓導航欄對齊行的底部，而不是堅持頂部？該標誌具有比導航欄更高的高度，因此設置行Bootstrap 3.0將導航欄和徽標對齊到底

<div class="row"> 
    <div class="col-sm-10" id="nav-left"> 
     <div class="navbar-header"> 
      <div class="collapse navbar-collapse" id="tws-navbar-top"> 
       <ul class="nav navbar-nav navbar-top"> 
        <li><a href="#" class="navbar-top-item">HOME</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div class="col-sm-2" id="nav-right"> 
     <img class="img-responsive" src="image" alt="logo" /> 
    </div> 
</div>

來源

2014-01-28 resurrectedstar

你能否提供一個[JSFoddle]（http://jsfiddle.net/）？我認爲.nav> li有填充。你必須改變這一點，以獲得你想要的路線。 –

bootstrap [navbar]（http://getbootstrap.com/components/#navbar）具有不同的標記。我不確定你爲什麼連續使用徽標和導航欄。用你的標記在這裏[播放]（http://bootply.com/new）。如果你還沒有成功。編輯您的問題並用您嘗試的內容以及徽標圖像的高度和寬度進行更新。 – Ravimallya

您可以添加margin-top您.navbar-header DIV的高度。

邊距的值等於徽標的高度減去50px，這是Bootstrap中的默認導航欄高度。

.navbar-header { 
    margin-top: 20px !important; //if the logo has a 70px height. 
    }

示例here on bootply。

來源

2014-01-28 20:58:40 guli

Bootstrap 3.0將導航欄和徽標對齊到底

回答

相關問題