2012-03-29 143 views
8

Twitter-Bootstrap中導航欄的默認高度太小。當高度增加時,會侵蝕下面的div。 如何增加滑動整個頁面的導航欄的高度?如果這是可能的,如何將導航欄鏈接放置在導航欄的頂部/底部。Twitter-Bootstrap導航欄高度太小

+0

解決了。 在.navbar .nav中更改高度 添加了填充並給出了一個值 – Gattoo 2012-03-30 09:15:12

+0

將您的結果作爲答案發布,並通過勾選綠色複選標記以使此問題關閉,從而在將來有助於其他用戶的批准。 – 2012-04-02 11:55:25

+0

謝謝。我會愛別人,也許是你,做吧。 – Gattoo 2012-04-03 05:01:31

回答

19

我很確定我不喜歡這個解決方案,但它的工作量我必須花費在這個上。

.navbar .container { height: 2em; } 

我不得不在相同的選擇器中添加一些填充頂部以使導航欄內部的東西能夠很好地垂直對齊。

編輯:我只是重新讀你的問題,看到你遇到了「下面的div」的問題。在這種情況下,你還需要調整身體標記的填充,例如

body { padding-top: 6em; } 

Twitter Bootstrap docs on Navbar

當你貼上的導航欄,記得要佔隱藏區域 下方。添加40px或更多的apdding到<機身>。請務必在覈心引導CSS之後以及可選的響應 CSS之前添加 。

+0

這也是一個可行的解決方案。謝謝@Chris。 – Gattoo 2012-04-20 07:00:35

6

添加像這樣的填充是不夠的,如果你使用的響應 引導。在這種情況下,當您調整窗口大小時,您會在頁面頂部和導航欄之間產生空隙 。一個適當的解決方案是這樣的:

body { 
    padding-top: 60px; 
} 
@media (max-width: 979px) { 
    body { 
    padding-top: 0px; 
    } 
} 

來源: Twitter Bootstrap - top nav bar blocking top content of the page

1

你可以試試這個。它適用於任何尺寸的顯示器。

​​
0
</script> 

$(".dropdown-toggle").click(function() { 
$(".nav-collapse").css('height', 'auto') 
}); 

</script> 

這解決了我的一個類似的問題,(子菜單並沒有出現因爲小母UL高度,在第一次點擊)也許它適用於你。