引導定位 - 導航頭對準

enter image description here

但是，因爲我有一個形象，左對齊，然後兩條線圖像旁邊的（一個是H1和其中一個是H2），我正在努力爭取在導航欄中使用「品牌」框。它似乎有很多填充和奇怪的東西在繼續。

enter image description here

這是我的導航欄代碼：

<div class="navbar navbar-inverse navbar-custom shadow_bottom 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 collapsed" data-toggle="collapse" data-target="#small-navbar-button"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <div class="header"> 
        <a class="navbar-brand" href="#"> 
         <img src="~/images/logo.png" alt="AccuFinance - Home Budget Site" /> 
        </a> 

        <a class="navbar-brand" href="#"> 

         <h1>AccuFinance</h1> 
         <h2>Home Finance - Simplifying Budgeting</h2> 
        </a> 
       </div> 


      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="small-navbar-button" style="padding-right: 25px"> 
       <ul class="nav navbar-nav pull-right"> 
        <li class="active"><a href="/"><span class="glyphicon glyphicon-home"></span>&nbsp;Home</a></li>

...

這個問題大概是我的課= 「頭」區。我創建了一些CSS嘗試和正確定位我的項目：

.header img { 
    float: left; 
    margin: 2px; 
    top: 5px; 
    padding: 0; 
} 

.header h1 { 
    position: relative; 
    top: 5px; 
    bottom: 2px; 
    left: 2px; 
}

但我似乎無法給兩個頭正確對齊旁邊的圖像內的導航欄區域。

Bootply版本：http://www.bootply.com/OzTmfYgHX7

這個問題似乎是我的品牌塊（帶圖像和文字）似乎有在頂部有一個大的填充。圖像應該正好靠在屏幕的頂部。

來源

2015-04-26 Craig

你需要在你的CSS中的'div.header'類中指定高度。 –

請提供一個JSFiddle與您的問題。 –

我添加了一個bootply鏈接。 – Craig

如果您自定義的引導：

http://getbootstrap.com/customize/

更改@導航欄高度各地960x75像素的東西。這應該爲你做。

默認情況下，引導將高度限制爲50px。任何比這更高的品牌圖片都會溢出到以下內容中。

來源

2015-04-26 22:37:42 Chausser

謝謝。這的確有幫助。但是，有沒有辦法以某種方式將品牌提升一點？造成問題的圖像頂部存在很大差距。你提到的修復方法確實有效。 – Craig

最有可能的就是@ navbar-padding-vertical設置。您可以將其更改爲固定值，例如10像素或如果您只需要很小的空間5像素。 – Chausser

您會發現您正在用.navbar品牌類包裝徽標圖像和徽標文本。

.navbar-brand { 
    float: left; 
    height: 50px; 
    padding: 15px 15px; 
    font-size: 18px; 
    line-height: 20px; 
}

因此，您可以根據它製作一個自定義類，並將這些值分配給適合的值。像我的navbar品牌或任何你喜歡的東西。只需快速播放，將填充設置爲5px 15px可能是合適的。

.my-navbar-brand { 
    float: left; 
    height: 50px; 
    padding: 5px 15px; 
    font-size: 18px; 
    line-height: 20px; 
}

來源

2015-04-26 23:04:20 TimBrownlaw

引導定位 - 導航頭對準

回答

相關問題