如何減少Bootstrap 3中的導航欄高度？

我想讓BS3中的導航欄的高度爲20px。我該怎麼做呢？如何減少Bootstrap 3中的導航欄高度？

我已經試過如下：

.tnav .navbar .container { height: 28px; }

什麼也沒做。

.navbar-fixed-top { 
    height: 25px; /* Whatever you want. */ 
}

看起來能夠增加欄的大小，但不能減小。

有什麼好辦法做到這一點，同時保持容器的對齊方式等

來源

2013-10-24 Rolando

引導有15px的頂部填充和15px的上.navbar-nav > li > a底部填充，所以你需要在你的CSS文件，並.navbar覆蓋它減少它有min-height:50px;儘可能減少它。

例如

.navbar-nav > li > a {padding-top:5px !important; padding-bottom:5px !important;} 
.navbar {min-height:32px !important}

這些類添加到你的CSS，然後檢查。

來源

2013-10-24 20:50:11

是你要求的嗎？ –

是的。謝謝！ – Rolando

我在SO和Google上搜索了很多，但是這個解決方案做到了！謝謝！ – n2o

如果你只有一個導航，並且你想改變它，你應該改變你的variables.less：@navbar-height（在265行附近，我不記得我添加了多少行）。

這是由mixin .navbar-vertical-align引用的，它用於例如定位「toggle」元素，任何含有.navbar-form, .navbar-btn,和.navbar-text的東西。

如果您有兩個導航欄並希望它們的高度不同，則Minder Saini's answer可能工作得很好，例如#topnav.navbar進一步限定，但應在多個設備寬度上進行測試。

來源

2014-05-01 17:20:03

代替<nav class="navbar ...使用<nav class="navbar navbar-xs...

並添加這些3線的CSS

.navbar-xs { min-height:28px; height: 28px; } 
.navbar-xs .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; } 
.navbar-xs .navbar-nav > li > a { padding-top: 0px; padding-bottom: 0px; line-height: 28px; }

輸出：

enter image description here

來源

2015-01-23 05:02:28 Yasser

它沒有響應。 –

Minder Saini的上面的例子幾乎工作，但在需要.navbar-brand s也會減少。

工作示例（使用它自己的網站上）與引導3.3.4：

.navbar-nav > li > a, .navbar-brand { 
    padding-top:5px !important; padding-bottom:0 !important; 
    height: 30px; 
} 
.navbar {min-height:30px !important;}

編輯移動... 爲了使移動這個例子中工作，以及，你要改變導航欄切換的造型像這樣

.navbar-toggle { 
    padding: 0 0; 
    margin-top: 7px; 
    margin-bottom: 0; 
}

來源

2015-03-26 18:16:17 felwithe

這將是我的下一個SO搜索。謝謝 – sMaN

我希望我可以投一些upvotes，人們只是搞亂了其他類似問題的風格，但最後這一個工作 – Abhinay

無法在移動視圖中正常工作 – TomSawyer

答案上述工作得很好（MVC5 +引導3.0），但高度恢復到默認的一次導航欄b utton出現了（非常小的屏幕）。不得不在我的.css中添加下面的內容來解決這個問題。

.navbar-header .navbar-toggle { 
    margin-top:0px; 
    margin-bottom:0px; 
    padding-bottom:0px; 
}

來源

2017-03-12 07:25:40 Arfath

.navbar-nav > li > a {padding-top:7px !important; padding-bottom:7px !important;} 
.navbar {min-height:32px !important;} 
.navbar-brand{padding-top:7px !important; max-height: 24px; } 
.navbar .navbar-toggle { margin-top: 0px; margin-bottom: 0px; padding: 8px 9px; }

來源

2017-09-14 00:24:09 HARISH

如果您可以添加有關這些CSS樣式的簡要說明，對讀者會有所幫助。 :) – Nisarg

只需通過包括給你的變量覆蓋更改默認的50像素導航欄高度。

您可以分別在bootstrap的SASS和LESS變量上的365行和360行找到此默認導航欄高度。

來源

2018-02-06 08:34:48 MsC

如何減少Bootstrap 3中的導航欄高度？

回答

相關問題