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

Question

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

我尝试过以下方法:

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

什么也没做.

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

似乎能够增加条形的大小,但不能减少.

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

Answer 1

bootstrap有15px顶部填充和15px底部填充,.navbar-nav > li > a所以你需要通过覆盖它在你的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

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

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

你也可以尝试其他风格。
我发现定义导航栏总高度的样式是：

• padding-top并padding-bottom设置为 0.5rem .navbar。
• padding-top并padding-bottom设置为 0.5rem .navbar-text。
• 除了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代替。