降低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中工作良好。*

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

花了几个小时后,添加下面的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> 

工作scheme:

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

例如:

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

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

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

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

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

这是我的经验

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

将navabr的高度改为38px

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

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

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

在这里输入图像说明

我认为我们可以在不改变现有颜色的情况下编写更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-品牌”)实际上只有当你有文字作为你的“品牌”的名字才需要。

想要添加我的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'); 

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

希望这有助于某人。

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