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

How do you decrease navbar height in Bootstrap 3?

提问by Rolando

I want to make my navbar in BS3 to be of height 20px. How do I do this?

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

I've tried the following:

我尝试了以下方法：

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

Did nothing.

什么也没做。

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

Appears to be able to increase the size of the bar, but cannot decrease.

看起来可以增加栏的大小，但不能减少。

What is a good way to do this while preserving the container's alignment, etc.

在保留容器对齐等的同时，有什么好方法可以做到这一点？

回答by Minder Saini

bootstrap had 15px top padding and 15px bottom padding on .navbar-nav > li > aso you need to decrease it by overriding it in your css file and .navbarhas min-height:50px;decrease it as much you want.

引导有15px的顶部填充和底部均为15px填充的.navbar-nav > li > a，所以你需要在你的CSS文件覆盖它减少它，.navbar有min-height:50px;尽可能多的你想减少它。

for example

例如

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

add these classes to your css and then check.

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

回答by felwithe

Minder Saini's example above almost works, but the .navbar-brandneeds to be reduced as well.

上面 Minder Saini的例子几乎可以工作，但也.navbar-brand需要减少。

A working example (using it on my own site) with Bootstrap 3.3.4:

一个使用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;}

Edit for Mobile...To make this example work on mobile as well, you have to change the styling of the navbar toggle like so

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

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

回答by Yasser Shaikh

Instead of <nav class="navbar ...use <nav class="navbar navbar-xs...

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

and add these 3 line of css

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

Output:

输出：

回答by ePi272314

For Bootstrap 4
Some of the previous answers are not working for Bootstrap 4. To reduce the size of the navigation bar in this version, I suggest eliminating the padding like this.

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

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

You could try with other styles too.
The styles I found that define the total height of the navigation bar are:

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

• padding-topand padding-bottomare set to 0.5rem for .navbar.
• padding-topand padding-bottomare set to 0.5rem for .navbar-text.
• besides a line-heightof 1.5rem inherited from the body.

• padding-top并padding-bottom设置为 0.5rem .navbar。
• padding-top并padding-bottom设置为 0.5rem .navbar-text。
• 除了line-height1.5rem 继承自body.

Thus, in total the navigation bar is 3.5 times the root font size.

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

In my case, which I was using big font sizes; I redefined the ".navbar" class in my CSS file like this:

就我而言，我使用的是大字体；我在我的 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;
}

Final comment, avoid using absolute values when playing with the previous styles. Use the units remor eminstead.

最后评论，在玩以前的样式时避免使用绝对值。使用单位rem或em代替。

回答by Arfath

The answer above worked fine (MVC5 + Bootstrap 3.0), but the height returned to the default once the navbar button showed up (very small screen). Had to add the below in my .css to fix that as well.

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

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

回答by IT HELPER

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

回答by Carl Bussema

If you have only one nav and you want to change it, you should change your variables.less: @navbar-height(somewhere near line 265, I can't recall how many lines I added to mine).

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

This is referenced by the mixin .navbar-vertical-align, which is used for example to position the "toggle" element, anything with .navbar-form, .navbar-btn,and .navbar-text.

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

If you have two navbars and want them to be different heights, Minder Saini's answermay work well enough, when qualified further by an , e.g., #topnav.navbarbut should be tested across multiple device widths.

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

回答by Dush

In Bootstrap 4

在 Bootstrap 4 中

In my case I have just changed the .navbarmin-heightand the links font-sizeand it decreased the navbar.

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

For example:

例如：

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

And this also worked for increasing the navbar height.

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

This also helps to change the navbar size when scrolling down the browser.

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

回答by MsC

Simply change the default 50px navbar-height by including this to your variable overrides.

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

You can find this default navbar-height on line 365 and 360 on bootstrap's SASS and LESS variables files respectively.

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

File location, SASS: bootstrap/assets/stylesheets/bootstrap/_variables.scss

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

File location, LESS: bootstrap/less/variable.less

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