大佬教程收集整理的这篇文章主要介绍了twitter-bootstrap – 降低bootstrap 3.0 navbar的高度，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
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,.25),inset 0 -1px 0 rgba(0,.1);-moz-Box-shadow: 0 1px 3px rgba(0,.1);Box-shadow: 0 1px 3px rgba(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.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;}
结果
从屏幕上显示，导航栏输出减少，但高度不降低。原始高度显示为粉红色。
以上css脚本几乎工作良好在bootstrap 2. *
有什么办法正确减少高度。
使用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;}
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>
以上是大佬教程为你收集整理的twitter-bootstrap – 降低bootstrap 3.0 navbar的高度全部内容，希望文章能够帮你解决twitter-bootstrap – 降低bootstrap 3.0 navbar的高度所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。