64

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

我尝试了以下方法：

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

什么也没做。

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

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

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

4

9 回答 9

113

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 中，然后检查。

于 2013-10-24T20:50:11.447 回答
55

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;
}
于 2015-03-26T18:16:17.800 回答
25

而不是<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; }

输出：

在此处输入图像描述

于 2015-01-23T05:02:28.110 回答
5

对于 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-height1.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代替。

于 2018-05-30T07:32:04.067 回答
1

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

.navbar-header .navbar-toggle {
    margin-top:0px;
    margin-bottom:0px;
    padding-bottom:0px;
}
于 2017-03-12T07:25:40.657 回答
0

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

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

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

于 2014-05-01T17:20:03.330 回答
0

在引导程序 4 中

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

例如：

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

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

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

于 2019-11-03T05:28:01.083 回答
0 
 .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; }
于 2017-09-14T00:24:09.310 回答
-1

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

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

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

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

于 2018-02-06T08:34:48.370 回答