你如何降低Bootstrap 3中的导航栏高度？

Question

我想让BS3中的导航栏高度为20px。我该怎么做？

我尝试了以下内容：

.tnav .navbar .container { height: 28px; }

什么都没做。

.navbar-fixed-top {
    height: 25px; /* Whatever you want. */
}

似乎能够增加条形图的大小，但不能减小。

在保留容器对齐等的同时执行此操作的好方法是什么

Answer 1

bootstrap在.navbar-nav > li > a上有15px顶部填充和15px底部填充，因此您需要通过覆盖css文件来减少它，并.navbar min-height:50px;减少它所需的数量。

例如

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

将这些类添加到您的CSS中，然后检查。

Answer 2

上面的

Minder Saini示例几乎可以使用，但.navbar-brand也需要减少。

Bootstrap 3.3.4 的一个工作示例（在我自己的网站上使用它）：

.navbar-nav > li > a, .navbar-brand {
    padding-top:5px !important; padding-bottom:0 !important;
    height: 30px;
}
.navbar {min-height:30px !important;}

编辑移动设备... 要使此示例也适用于移动设备，您必须更改导航栏切换的样式，如此

.navbar-toggle {
     padding: 0 0;
     margin-top: 7px;
     margin-bottom: 0;
}

Answer 3

而不是<nav class="navbar ...使用<nav class="navbar navbar-xs...

并添加这3行css

.navbar-xs { min-height:28px; height: 28px; }
.navbar-xs .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; }
.navbar-xs .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 28px; }

输出：

Answer 4

上面的答案工作正常（MVC5 + Bootstrap 3.0），但一旦导航按钮出现（非常小的屏幕），高度恢复到默认值。不得不在我的.css中添加以下内容来修复它。

.navbar-header .navbar-toggle {
    margin-top:0px;
    margin-bottom:0px;
    padding-bottom:0px;
}

Answer 5

对于Bootstrap 4
以前的一些答案不适用于Bootstrap 4.为了减小此版本中导航栏的大小，我建议删除这样的填充。

.navbar { padding-top: 0.25rem; padding-bottom: 0.25rem; }

您也可以尝试其他款式 我发现定义导航栏总高度的样式是：

{li> padding-top和padding-bottom设置为.navbar的0.5rem。 {li> padding-top和padding-bottom设置为.navbar-text的0.5rem。
• 除了line-height 1.5rem继承自body。
之外

因此，导航栏的总数是根字体大小的3.5倍。

就我而言，我使用的是大字号;我在我的CSS文件中重新定义了“.navbar”类，如下所示：

.navbar {
  padding-top:    0.25rem; /* 0px does not look good on small screens */
  padding-bottom: 0.25rem;
  font-size: smaller;      /* Just because I am using big size font */
  line-height: 1em;
}

最终评论，避免在使用之前的样式时使用绝对值。请改用单位rem或em。

Answer 6

如果你只有一个导航而你想要改变它，你应该改变你的变量。@navbar-height（在第265行附近，我不能回想起我添加了多少行）

这是由mixin .navbar-vertical-align引用的，例如用于定位＆＃34;切换＆＃34;元素，包含.navbar-form, .navbar-btn,和.navbar-text的任何内容。

如果您有两个导航栏，并希望它们具有不同的高度，Minder Saini's answer可能会运行得很好，当进一步限定时，例如#topnav.navbar，但应该跨多个设备宽度进行测试。

Answer 7

 .navbar-nav > li > a {padding-top:7px !important; padding-bottom:7px !important;}
.navbar {min-height:32px !important;} 
.navbar-brand{padding-top:7px !important; max-height: 24px;  }
.navbar .navbar-toggle {  margin-top: 0px; margin-bottom: 0px; padding: 8px 9px; }

Answer 8

在Bootstrap 4中

就我而言，我刚刚更改了.navbar min-height和链接font-size，它减少了导航栏。

例如：

.navbar{
    min-height:12px;
}
.navbar  a {
    font-size: 11.2px;
}

这也有助于增加导航栏的高度。

这也有助于在向下滚动浏览器时更改导航栏的大小。

Answer 9

只需将此值包含在变量覆盖中，即可更改默认的50px导航栏高度。

您可以分别在bootstrap的SASS和LESS变量文件中找到365和360行的默认导航栏高度。

文件位置，SASS： 自举/资产/样式表/引导/ _variables.scss

文件位置，LESS： 自举/少/ variable.less