降低Bootstrap 3.0导航栏的高度


108

我正在尝试降低用于固定顶部行为的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, 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;}

结果

在此处输入图片说明

从屏幕上显示,导航栏的输出减少了,但高度没有减少。原始高度以粉红色显示。

上面的css脚本在bootstrap 2.中几乎可以正常工作

有什么办法可以适当降低高度。


在Bootstrap 3中不再需要<div class =“ navbar-inner”>
Bartek S

navbar-inner是我的自定义类。与bootstrap 3.0无关。
irfanmcsd 2013年

对我有用的唯一方法是在此链接上解释:stackoverflow.com/questions/19576175/…它仅用两行代码就降低了导航栏的高度
giovannim 2014年

Answers:


124

花了几个小时后,添加以下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;}

更新 完整代码,以自定义截图并降低导航栏的高度。

在此处输入图片说明

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>

4
这不起作用...在此页上检查我的答案... .navbar的最小高度默认设置为50px,因此,如果将高度设置为28px,它将被50px的最小高度覆盖。 ..
patrick

3
嗯,我看到这篇文章已经过编辑(很多!),现在确实显示了正确的代码。我还看到了我在此处的帖子中建议的最低高度设置,出于某种原因,该投票被拒绝了。被正确的,正确的话题和清晰的答案否决是非常令人沮丧的
patrick

@patrick不知道您的意思,但当时我的问题已由我自己的答案解决。声誉毫无疑问,如果人们给我赞成或反对的票。
irfanmcsd 2014年

1
编辑源代码将使此过程变得更容易
路加福音

有趣的是,这些对我没有用。我必须覆盖50px的固定高度;
凯文(Kevin)

43

工作解决方案:

Bootstrap 3.0默认情况下在顶部和底部有15px的填充,因此我们只需要覆盖它即可!

例如:

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

bootstrap.css中的默认值为10px?.navbar-nav> li> a {padding-top:10px; padding-bottom:10px; 行高:20px;}
jichi 2014年

1
在bootstrap.css(v3.0.2)中检查行号3884。这是.navbar-nav > li > a {padding-top: 15px; padding-bottom: 15px;}默认。
Ranveer 2014年

不确定v3.0.2。但是在bootstrap.css的v3.0.3行4541中,它是:.navbar-nav> li> a {padding-top:10px; padding-bottom:10px; 行高:20px;}
jichi 2014年

先生,您是我的英雄。
orokusaki 2015年

40

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

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

将元素高度更改为小于最小高度的值不会有任何区别...


如您在导航栏中看到的,我已经使用了height属性,但没有任何效果。
irfanmcsd 2013年

这是最小高度属性,而不是高度...如果将高度设置为小于最小高度的数字,则最小高度将防止其变小...
patrick

7
为什么这会引起反对?这是本文中设置问题的一种可行解决方案。主持人可以看看这个吗,似乎有一个拒绝投票的人,只是在不检查实际答案的情况下就对他不同意的内容进行了投票。在我的帖子具有相同答案之后的2.5个月内,发布的链接进一步向上链接,该链接位于外部链接上,并获得了两次投票。我讨厌人们用随机降票稀释SO!
patrick

我经常问自己,人们现在如何投票,您会收到通知吗?在meta上找不到此内容
Iulian Onofrei 2014年

5
没有通知...如果人们认为其他答案更好或更某事,人们似乎会投票否决...我不知道...在这种情况下,询问该问题的人以我自己的答案接受了我的答案。如果您问我的话有点...脚...但是再说一遍,这个网站不是关于自我的,而是关于帮助别人的……
patrick

27

如果使用的源较少,则variables.less文件中的导航栏高度应有一个变量。如果您不使用源代码,则可以使用引导程序站点提供的定制实用程序对其进行自定义。然后,您可以下载它并将其包含在您的项目中。您要查找的变量是:@navbar-height


1
但我不想更改原始的导航栏行为。我只是更改其他顶级导航栏的高度。
irfanmcsd 2013年

2
我认为这是最好的解决方案。
Imtiaz

1
如果您的站点上只有一个导航并且应该是那个高度,那么这是最好的解决方案。如果您有多个导航,它会变得有点困难,因为.navbar-vertical-align在多个地方使用,并且对@ navbar-height有着严格的引用。
卡尔·布塞玛

不错的解决方案。只要您不打算使用CDN
急于2014年

1
只要您在单独的少部分中使用替代,这便是最佳解决方案,并且应该可以使您毫无问题地升级引导程序。
肯王子

9

这是我的经验

 .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


添加此内容以处理.navbar-form:.navbar .navbar-form { margin-top: 2px; margin-bottom: 0px }
steph643 2014年

另一个扩展名:.navbar .navbar-text {margin-top:0px; 底边距:0px; 行高:38px; }
cnmuc

3

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

在此处输入图片说明


3

要添加我的2便士,并感谢James Poulose的最初回答,它是唯一适用于我的特定项目的工具(MVC 5和最新版本的Bootstrap 3)。

为了清楚起见,并且为了使以后的编辑更容易,这主要是针对初学者的。我建议您在CSS文件底部为您的项目添加一个部分,例如,我喜欢这样做:

/* Bootstrap overrides */

.some-class-here {
}

考虑到James Poulose的回答,我做到了:

/* 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; }

我更改了padding-top值以将文本下推到导航栏元素上。您几乎可以覆盖任何这样的Bootstrap元素,并且这是进行更改的一种好方法,而无需占用Boostrap基类,因为您要做的最后一件事就是在其中进行更改,然后在更新Bootstrap时将其丢失!

最后,为了进一步分离,我想拆分CSS文件,并使用@import声明将子文件导入到一个主CSS文件中,以便于管理,例如:

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

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

希望这对某人有帮助。


2

我认为我们可以写出更少的样式,而无需更改现有颜色。以下对我有用(在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品牌”)。


好的答案是,这是唯一适用于我最新版本的Bootstrap 3的答案(注意:如果要向下推文本,请增加.navbar-brand类以及.navbar-nav的padding-top值> li>一堂课
Tahir Khalid

0

我得到了同样的问题,通过引导提供我的菜单栏的高度是太大了,其实我下载了一些错误的引导,终于摆脱它从该网站下载一部开拓创新的引导.. http://getbootstrap.com/2.3 .2 / 想要在yii(netbeans)中使用引导程序,按照以下教程进行操作:https://www.youtube.com/watchv = XH_qG8gphaw ...虽然没有声音,但是步骤很慢,您可以轻松理解和实现他们。谢谢


您对代码进行了哪些更改才能获得所需的效果?如果您指向答案中的链接,则应总结解决方案。
布赖恩
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.