導航欄高度變化不會影響活動區域

Question

爲了使我的標誌尺寸符合我在導航欄中所需的尺寸，我將頁面頂部的固定導航欄的高度增加到80px。現在的問題是，主動選擇區域的高度並未隨導航欄變化。

screencap of affected area

我的HTML：

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#"> 
     <img src="./img/logo.png" alt="logo"/> 
     </a> 
    </div> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="./index.html">Home</a></li> 
     <li><a href="./about-us.html">About Us</a></li> 
     <li><a href="./products.html">Products</a></li> 
     <li><a href="./contact.html">Contact</a></li> 
     <li><a href="./jobs.html">Jobs</a></li> 
     <li><a href="./clients.html">Clients</a></li> 
    </ul> 
    </div> 
</nav> 

我的自定義CSS覆蓋bootstrap.css：

.navbar { 
    min-height: 80px; 
} 

.navbar-brand { 
    height: 80px; 
} 

Answer 1

如果您想將導航欄 - 品牌（標誌）重疊的導航欄，你可以使用絕對定位是這樣的：

.navbar-header { 
    position: relative; 
} 
.navbar-brand { 
    position: absolute; 
    top: 0; 
    height: 80px; 
    background-color: red; 
} 

在此筆實施例：Absolute Position

如果想離按照徽標的高度來放置導航欄，您需要從「.nav.navbar-nav」元素的鏈接中調整導航欄的高度和默認填充。最簡單的方法是使用預先編譯程序，如使用自己的引導程序變量的gulp或從引導程序調整自定義頁面上的默認引導程序少變量。 Customize Boostrap

例在此筆：Same height of logo and navbar

Answer 2

外格（.navbar）具有比內多了一個優先級（ .navbar品牌），如果您檢查元素，則可能會看到「高度：80px」的刪除線。 試試！「重要」

Answer 3

你應該知道的作品究竟是如何引導（看css文件）

.navbar { 
     min-height: 80px; // Default 50px 
    } 

    .navbar-brand { 
     height: 80px; 
    } 
    .navbar-nav > li > a { 
     padding-top: 30px; // Default 15px 
     padding-bottom: 30px; // Default 15px 
    } 

Answer 4

如果你想要的徽標和導航按鈕是同一高度的時候都顯示爲一個水平菜單，下面的CSS是你可以使用的東西。

@media規則在那裏，因此新規則不適用於小屏幕設備（例如手機），因爲導航菜單在垂直模式下顯示在這些設備中，並且您不希望按鈕顯示爲額外高在一個垂直的菜單。

@media screen and (min-width:768px) { 
    .navbar { 
    min-height: 80px; 
    } 
    .navbar-brand { 
    height: 80px !important; 
    } 
    .nav>li>a { 
    padding: 15px 30px !important; 
    line-height: 50px !important; 
    } 
} 

http://codepen.io/anon/pen/ezZxJw