108

我正在尝试降低与固定顶部行为一起使用的引导 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;}

结果

在此处输入图像描述

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

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

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

4

9 回答 9

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>
于 2013-09-03T21:50:30.913 回答
43

工作解决方案：

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

例如：

.navbar-nav > li > a {padding-top:10px !important; padding-bottom:10px !important;}
.navbar {min-height:40px !important}
于 2013-12-14T18:26:05.850 回答
40

只需像这样覆盖 .navbar 中设置的最小高度：

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

将元素高度更改为小于最小高度的东西不会有什么不同......

于 2013-11-02T00:02:52.210 回答
27

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

于 2013-09-03T19:47:08.577 回答
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

于 2014-08-02T08:48:29.467 回答
3

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

在此处输入图像描述

于 2016-01-31T00:53:03.163 回答
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');

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

希望这可以帮助某人。

于 2016-11-20T11:57:35.430 回答
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; }

只有当您将文本作为“品牌”名称时，才需要最后一个（“导航栏品牌”）。

于 2014-08-12T06:38:15.043 回答
0

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

于 2015-07-10T17:26:18.670 回答