如何减lessBootstrap 3中的导航栏高度？

我想让BS3的导航栏的高度为20px。 我该怎么做呢？

我已经尝试了以下内容：

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

什么也没做。

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

似乎能够增加酒吧的大小，但不能减less。

在保持容器的位置的同时，做这件事的好方法是什么

Answer 1

bootstrap有15px的顶部填充和15px底部填充.navbar-nav > li > a所以你需要通过覆盖它在你的CSS文件和.navbar具有min-height:50px; 减less你想要的。

例如

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

将这些类添加到您的CSS，然后检查。

Answer 2

上述Saini的例子几乎可以奏效，但是.navbar-brand需要减less。

使用Bootstrap 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; } 

Answer 3

而不是<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; } 

输出 ：

Answer 4

上面的答案工作正常（MVC5 +引导3.0），但高度返回到默认情况下，导航栏button显示（非常小的屏幕）。 不得不在我的.css中添加下面的内容来解决这个问题。

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

Answer 5

如果你只有一个导航，你想改变它，你应该改变你的variables.less： @navbar-height （265行附近，我不记得我加了多less行）。

这是由mixin .navbar-vertical-align引用的，例如用于定位“toggle”元素，任何带有.navbar-form, .navbar-btn,和.navbar-text 。

如果你有两个导航栏，并希望他们有不同的高度，当Saini的回答可能工作得很好，例如#topnav.navbar进一步限定，但应在多个设备宽度进行testing。

Answer 6

  .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; }