降低bootstrap 3.0 navbar的高度

我试图减less固定的顶级行为使用的引导3.0导航栏高度。 在这里，我使用的代码。

HTML

<div class="tnav"> <div class="navbar navbar-fixed-top" role="banner"> <div class="navbar-inner-sm"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <nav class="collapse navbar-collapse" role="navigation"> <ul class="nav navbar-nav pull-right"> <li class="active"> <a href="../getting-started">Getting started</a> </li> <li> <a href="../css">Ext01</a> </li> <li> <a href="../components">Language</a> </li> <li> <a href="../javascript">My Account</a> </li> <li> <a href="../customize">Sign Out</a> </li> </ul> </nav> </div> </div> </div> 

CSS

 .tnav .navbar { background:#F06; height:30px; } .navbar-inner-sm{background-color: #282828;padding: 1px 20px;background-repeat: repeat-x;-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);background-image: linear-gradient(top, #333333, #222222);} .navbar-inner-sm .nav {position: relative;left: 0;display: block;float: left;margin: 0 10px 0 0;} .navbar-inner-sm .nav.pull-right {float: right;} .navbar-inner-sm .nav > li {display: block;float: left;} .navbar-inner-sm .nav > li > a {float: none;padding: 4px 5px;line-height: 19px;color: #999999;text-decoration: none;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);} .navbar-inner-sm .nav > li > a:hover {background-color: transparent;color: #ffffff;text-decoration: none;} .navbar-inner-sm .nav .active > a,.navbar .nav .active > a:hover {color: #ffffff;text-decoration: none;background-color: #003753;} .navbar-inner-sm .divider-vertical {height: 27px;width: 1px;margin: 0 9px;overflow: hidden;background-color: #282828;border-left: 1px solid #3f3f3f; border-right: 1px solid #161616;} .navbar-inner-sm .nav.pull-right {margin-left: 10px;margin-right: 0;} 

结果

从屏幕显示，导航栏输出减less，但高度不下降。 原始高度以粉红色显示。

上面的css脚本几乎在引导2中工作良好。*

有什么办法可以正确降低身高。

Answer 1

花了几个小时后，添加下面的CSS类修复了我的问题。

使用Bootstrap 3.0。*

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

使用Bootstrap 3.3.4

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

更新完整的代码来自定义和减less截图的导航栏的高度。

CSS：

 /* navbar */ .navbar-primary .navbar { background:#9f58b5; border-bottom:none; } .navbar-primary .navbar .nav > li > a {color: #501762;} .navbar-primary .navbar .nav > li > a:hover {color: #fff; background-color: #8e49a3;} .navbar-primary .navbar .nav .active > a,.navbar .nav .active > a:hover {color: #fff; background-color: #501762;} .navbar-primary .navbar .nav li > a .caret, .tnav .navbar .nav li > a:hover .caret {border-top-color: #fff;border-bottom-color: #fff;} .navbar-primary .navbar .nav > li.dropdown.open.active > a:hover {} .navbar-primary .navbar .nav > li.dropdown.open > a {color: #fff;background-color: #9f58b5;border-color: #fff;} .navbar-primary .navbar .nav > li.dropdown.open.active > a:hover .caret, .tnav .navbar .nav > li.dropdown.open > a .caret {border-top-color: #fff;} .navbar-primary .navbar .navbar-brand {color:#fff;} .navbar-primary .navbar .nav.pull-right {margin-left: 10px; margin-right: 0;} .navbar-xs .navbar-primary .navbar { min-height:28px; height: 28px; } .navbar-xs .navbar-primary .navbar .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; } .navbar-xs .navbar-primary .navbar .navbar-nav > li > a { padding-top: 0px; padding-bottom: 0px; line-height: 28px; } .navbar-sm .navbar-primary .navbar { min-height:40px; height: 40px; } .navbar-sm .navbar-primary .navbar .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 40px; } .navbar-sm .navbar-primary .navbar .navbar-nav > li > a { padding-top: 0px; padding-bottom: 0px; line-height: 40px; } 

使用代码：

 <div class="navbar-xs"> <div class="navbar-primary"> <nav class="navbar navbar-static-top" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div><!-- /.navbar-collapse --> </nav> </div> </div> 

Answer 2

工作scheme：

Bootstrap 3.0默认在顶部和底部有一个15px的填充，所以我们只需要覆盖它！

例如：

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

Answer 3

只需重写.navbar中设置的最小高度，如下所示：

 .navbar{ min-height:20px; //* or whatever height you require } 

将元素高度改变为小于最小高度的东西不会有什么区别…

Answer 4

如果使用的是较less的源代码，那么variables.less文件中应该有一个用于导航栏高度的variables.less 。 如果您不使用源代码，那么您可以使用bootstrap站点提供的自定义实用程序对其进行自定义 。 然后你可以下载它并将其包含在你的项目中。 你正在寻找的variables是： @navbar-height

Answer 5

这是我的经验

  .navbar { min-height:38px; } .navbar .navbar-brand{ padding: 0 12px;font-size: 16px;line-height: 38px;height: 38px; } .navbar .navbar-nav > li > a { padding-top: 0px; padding-bottom: 0px; line-height: 38px; } .navbar .navbar-toggle { margin-top: 3px; margin-bottom: 0px; padding: 8px 9px; } .navbar .navbar-form { margin-top: 2px; margin-bottom: 0px } .navbar .navbar-collapse {border-color: #A40303;} 

Answer 6

在这个链接中解释了唯一对我有用的方法 ： 如何减lessBootstrap 3中的导航栏高度？

它只用两行代码就会降低导航栏高度

Answer 7

如果你们使用LESS / SASS生成你的样式表，并且在那里导入Bootstrap，我发现覆盖@ navbar-heightvariables可以让你设置navbar的高度，它最初是在variables.less文件中定义的。

Answer 8

我认为我们可以在不改变现有颜色的情况下编写更less的样式。 以下为我工作（在Bootstrap 3.2.0）

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

最后一个（“navbar-品牌”）实际上只有当你有文字作为你的“品牌”的名字才需要。

Answer 9

想要添加我的2便士，并感谢詹姆斯·普卢斯他原来的答案，这是唯一一个为我的特定项目（最新版本的Bootstrap 3的MVC 5）工作。

这主要针对初学者，为了清晰，并使未来的编辑更容易我build议你在你的项目的CSS文件的底部添加一个部分例如我喜欢这样做：

 /* Bootstrap overrides */ .some-class-here { } 

以詹姆斯·普鲁斯的答案为例，我这样做了：

 /* Bootstrap overrides */ .navbar-nav > li > a { padding-top: 8px !important; padding-bottom: 5px !important; } .navbar { min-height: 32px !important; } .navbar-brand { padding-top: 8px; padding-bottom: 10px; padding-left: 10px; } 

我改变了填充顶部的值，将文本放在我的导航栏元素上。 你几乎可以重写这样的Bootstrap元素，而且它是一个很好的修改Boostrap基类的方法，因为你最后要做的事情就是在那里做一个更改，然后在更新Bootstrap的时候丢失它！

最后，为了进一步分离，我喜欢分割我的CSS文件，并使用@import声明将子文件导入一个主CSS文件，以便于pipe理，例如：

 @import url('css/mysubcssfile.css'); 

注意 ：如果你正在拉多个文件，你需要确保它们以正确的顺序加载。

希望这有助于某人。

Answer 10

我得到了同样的问题，我的菜单栏由bootstrap提供的高度太大，实际上我下载了一些错误的引导，最后摆脱它通过从本网站下载orignal bootstrap .. http://getbootstrap.com/2.3 .2 /想在yii（netbeans）中使用bootstrap按照这个教程， https://www.youtube.com/watch ? v= XH_qG8gphaw …声音不存在，但步骤很慢，你可以很容易地理解和实施他们。 谢谢