如何在 Bootstrap 3 中降低导航栏高度？答案

【问题标题】：How do you decrease navbar height in Bootstrap 3?如何在 Bootstrap 3 中降低导航栏高度？
【发布时间】：2013-11-03 18:21:40
【问题描述】：

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

我尝试了以下方法：

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

什么也没做。

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

似乎可以增加条形的大小，但不能减小。

在保持容器对齐等的同时做到这一点的好方法是什么？

【问题讨论】：

标签： css twitter-bootstrap

【解决方案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 中，然后检查。

【讨论】：

我在 SO 和 Google 上搜索了很多，但这个解决方案做到了！谢谢！
使用标准的 3.0 导航栏，这根本行不通。完全没有。
当在导航栏内使用navbar-brand时，它的内边距也必须和.navbar-nav > li > a一样调整
这可行，但有几点需要注意。导航栏品牌也需要减少。我的工作示例是：.navbar-nav > li > a, .navbar-brand {padding-top:5px !important; padding-bottom:0 !important; height: 30px; }.navbar {min-height:30px !important;}
这只会影响导航栏中的链接，不会影响导航栏本身。

【解决方案2】：

如果你只有一个导航并且你想改变它，你应该改变你的变量。less：@navbar-height（在第 265 行附近，我不记得我添加了多少行）。

这是由 mixin .navbar-vertical-align 引用的，例如用于定位“toggle”元素，任何带有.navbar-form, .navbar-btn, 和.navbar-text 的东西。

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

【讨论】：

【解决方案3】：

用<nav class="navbar navbar-xs...代替<nav class="navbar ...

并添加这 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; }

输出：

【讨论】：

它没有响应。

【解决方案4】：

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

【讨论】：

这将是我的下一个 SO 搜索。谢谢
我希望我能投更多的票，人们只是在其他类似问题上搞砸了风格，但最后这个工作了

【解决方案5】：

上面的答案工作正常（MVC5 + Bootstrap 3.0），但是一旦导航栏按钮出现（非常小的屏幕），高度就会恢复为默认值。必须在我的 .css 中添加以下内容来解决这个问题。

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

【讨论】：

【解决方案6】：

 .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; }

【讨论】：

如果您能对这些 CSS 样式的作用进行简要说明，将对读者有所帮助。 :)

【解决方案7】：

只需将默认的 50px navbar-height 包含在您的变量覆盖中即可更改。

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

文件位置，SASS： bootstrap/assets/stylesheets/bootstrap/_variables.scss

文件位置，LESS： bootstrap/less/variable.less

【讨论】：

您在这里指的是哪些确切的文件来查找navbar-height？
如果您使用 LESS，则该文件是 variable.less。它位于 Bootstrap 的 LESS 文件夹中。

【解决方案8】：

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

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

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

对于.navbar，padding-top 和 padding-bottom 设置为 0.5rem。
对于.navbar-text，padding-top 和 padding-bottom 设置为 0.5rem。
除了继承自 body 的 1.5rem 的 line-height。

因此，导航栏总共是根字体大小的 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 单位。

【讨论】：

在我的情况下，只是在 .navbar 中更改 min-height 和在 .nav-link 中更改 font 在引导程序 4 中修复它

【解决方案9】：

在 Bootstrap 4 中

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

例如：

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

这也适用于增加导航栏的高度。

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

【讨论】：