![导航栏的高度]( "导航栏的高度")
本文介绍了降低引导程序 3.0 导航栏的高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
限时删除！！
我正在尝试降低用于固定顶部行为的 bootstrap 3.0 导航栏高度.我在这里使用代码.
HTML
<div class="navbar navbar-fixed-top" role="banner"><div class="navbar-inner-sm"><div class="容器"><div class="navbar-header"><button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
<nav class="collapse navbar-collapse" role="navigation"><ul class="nav navbar-nav pull-right"><li class="active"><a href="../getting-started">使用入门</a><li><a href="../css">Ext01</a><li><a href="../components">语言</a><li><a href="../javascript">我的账户</a><li><a href="../customize">退出</a></nav>
CSS
.tnav .navbar { 背景:#F06;高度: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), inset0 -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 {位置:相对；左:0；显示:块；浮动:左；边距:0 10px 0 0；}.navbar-inner-sm .nav.pull-right {float: right;}.navbar-inner-sm .nav >li {显示:块；浮动:左；}.navbar-inner-sm .nav >立>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 >立>a:悬停{背景颜色:透明；颜色:#ffffff；文字装饰:无；}.navbar-inner-sm .nav .active >a,.navbar .nav .active >a:悬停{颜色:#ffffff；文字装饰:无；背景颜色:#003753；}.navbar-inner-sm .divider-vertical {height: 27px;width: 1px;margin: 0 9px;overflow: hidden;background-color: #282828;border-left: 1px solid #3f3f3f;右边框:1px 实心 #161616;}.navbar-inner-sm .nav.pull-right {margin-left: 10px;margin-right: 0;}
结果
从屏幕上看，导航栏的输出减少了，但高度没有减少.原始高度以粉红色显示.
上面的 css 脚本在 bootstrap 2 中几乎可以很好地工作.*
有什么办法可以适当降低高度.
解决方案
花了几个小时后，添加以下 css 类解决了我的问题.
使用 Bootstrap 3.0.*
.tnav .navbar .container { height: 28px;}
使用 Bootstrap 3.3.4
.navbar-nav >立>a, .navbar-brand {padding-top:4px !important;填充底部:0 ！重要；高度:28px；}.navbar {min-height:28px !important;}
更新使用截图自定义和降低导航栏高度的完整代码.
CSS:
/* 导航栏 */.navbar-primary .navbar { 背景:#9f58b5;边框底部:无；}.navbar-primary .navbar .nav >立>{颜色:#501762;}.navbar-primary .navbar .nav >立>一个:悬停{颜色:#fff;背景颜色:#8e49a3;}.navbar-primary .navbar .nav .active >a,.navbar .nav .active >一个:悬停{颜色:#fff;背景颜色:#501762;}.navbar-primary .navbar .nav li >.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:悬停{}.navbar-primary .navbar .nav >li.dropdown.open >一个{颜色:#fff；背景颜色:#9f58b5；边框颜色:#fff；}.navbar-primary .navbar .nav >li.dropdown.open.active >a:hover .caret, .tnav .navbar .nav >li.dropdown.open >.caret {border-top-color: #fff;}.navbar-primary .navbar .navbar-brand {color:#fff;}.navbar-primary .navbar .nav.pull-right {margin-left: 10px;右边距:0;}.navbar-xs .navbar-primary .navbar { min-height:28px;高度:28px；}.navbar-xs .navbar-primary .navbar .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px;}.navbar-xs .navbar-primary .navbar .navbar-nav >立>一个 { 填充顶部:0px;填充底部:0px；行高:28px；}.navbar-sm .navbar-primary .navbar { min-height:40px;高度:40px；}.navbar-sm .navbar-primary .navbar .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 40px;}.navbar-sm .navbar-primary .navbar .navbar-nav >立>一个 { 填充顶部:0px;填充底部:0px；行高:40px；}
使用代码:
<div class="navbar-primary"><nav class="navbar navbar-static-top" role="navigation"><!-- 品牌和切换被分组以获得更好的移动显示--><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="#">Brand</a>
<!-- 收集导航链接、表单和其他用于切换的内容--><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8"><ul class="nav navbar-nav"><li class="active"><a href="#">首页</a></li><li><a href="#">链接</a></li><li><a href="#">链接</a></li></div><!--/.navbar-collapse --></nav>
I am trying to decrease bootstrap 3.0 navbar height which is used with fixed top behavior. Here i am using code.
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;}
Result
From screen it shows, nav bar decreased in output but height doesn't decreased. original height is shown in pink color.
Above css script almost work well in bootstrap 2.*
Is there any way to decrease height properly.
解决方案
After spending few hours, adding the following css class fixed my issue.
Work with Bootstrap 3.0.*
.tnav .navbar .container { height: 28px; }
Work with 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;}
UpdateComplete code to customize and decrease height of navbar with screenshot.
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; }
Usage Code:
<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>
这篇关于降低引导程序 3.0 导航栏的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
1403页，肝出来的..