twitter-bootstrap 降低引导程序 3.0 导航栏的高度

Question

提问by irfanmcsd

I am trying to decrease bootstrap 3.0 navbar height which is used with fixed top behavior. Here i am using code.

我正在尝试降低与固定顶部行为一起使用的引导程序 3.0 导航栏高度。我在这里使用代码。

HTML

<div class="tnav">
<div class="navbar navbar-fixed-top" role="banner">
    <div class="navbar-inner-sm">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav class="collapse navbar-collapse" role="navigation">
      <ul class="nav navbar-nav pull-right">
        <li class="active">
          <a href="../getting-started">Getting started</a>
        </li>
        <li>
          <a href="../css">Ext01</a>
        </li>
        <li>
          <a href="../components">Language</a>
        </li>
        <li>
          <a href="../javascript">My Account</a>
        </li>
        <li>
          <a href="../customize">Sign Out</a>
        </li>
      </ul>
    </nav>
  </div>
    </div>
</div>

CSS

.tnav .navbar { background:#F06; height:30px; }
.navbar-inner-sm{background-color: #282828;padding: 1px 20px;background-repeat: repeat-x;-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);background-image: linear-gradient(top, #333333, #222222);}
.navbar-inner-sm .nav {position: relative;left: 0;display: block;float: left;margin: 0 10px 0 0;}
.navbar-inner-sm .nav.pull-right {float: right;}
.navbar-inner-sm .nav > li {display: block;float: left;}
.navbar-inner-sm .nav > li > a {float: none;padding: 4px 5px;line-height: 19px;color: #999999;text-decoration: none;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);}
.navbar-inner-sm .nav > li > a:hover {background-color: transparent;color: #ffffff;text-decoration: none;}
.navbar-inner-sm .nav .active > a,.navbar .nav .active > a:hover {color: #ffffff;text-decoration: none;background-color: #003753;}
.navbar-inner-sm .divider-vertical {height: 27px;width: 1px;margin: 0 9px;overflow: hidden;background-color: #282828;border-left: 1px solid #3f3f3f; border-right: 1px solid #161616;}
.navbar-inner-sm .nav.pull-right {margin-left: 10px;margin-right: 0;}

Result

结果

enter image description here

在此处输入图片说明

From screen it shows, nav bar decreased in output but height doesn't decreased. original height is shown in pink color.

从屏幕上看，导航栏的输出减少了，但高度没有减少。原始高度以粉红色显示。

Above css script almost work well in bootstrap 2.*

上面的 css 脚本在 bootstrap 2.* 中几乎可以很好地工作

Is there any way to decrease height properly.

有什么办法可以适当降低高度。

Answer 1

回答by irfanmcsd

After spending few hours, adding the following css class fixed my issue.

花了几个小时后，添加以下 css 类解决了我的问题。

Work with Bootstrap 3.0.*

使用 Bootstrap 3.0.*

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

Work with Bootstrap 3.3.4

使用 Bootstrap 3.3.4

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

UpdateComplete code to customize and decrease height of navbar with screenshot.

更新完整代码以使用屏幕截图自定义和降低导航栏的高度。

enter image description here

在此处输入图片说明

CSS:

CSS：

/* navbar */
.navbar-primary .navbar { background:#9f58b5; border-bottom:none; }
.navbar-primary .navbar .nav > li > a {color: #501762;}
.navbar-primary .navbar .nav > li > a:hover {color: #fff; background-color: #8e49a3;}
.navbar-primary .navbar .nav .active > a,.navbar .nav .active > a:hover {color: #fff; background-color: #501762;}
.navbar-primary .navbar .nav li > a .caret, .tnav .navbar .nav li > a:hover .caret {border-top-color: #fff;border-bottom-color: #fff;}
.navbar-primary .navbar .nav > li.dropdown.open.active > a:hover {}
.navbar-primary .navbar .nav > li.dropdown.open > a {color: #fff;background-color: #9f58b5;border-color: #fff;}
.navbar-primary .navbar .nav > li.dropdown.open.active > a:hover .caret, .tnav .navbar .nav > li.dropdown.open > a .caret {border-top-color: #fff;}
.navbar-primary .navbar .navbar-brand {color:#fff;}
.navbar-primary .navbar .nav.pull-right {margin-left: 10px; margin-right: 0;}
.navbar-xs .navbar-primary .navbar { min-height:28px; height: 28px; }
.navbar-xs .navbar-primary .navbar .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; }
.navbar-xs .navbar-primary .navbar .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 28px; }
.navbar-sm .navbar-primary .navbar { min-height:40px; height: 40px; }
.navbar-sm .navbar-primary .navbar .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 40px; }
.navbar-sm .navbar-primary .navbar .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 40px; }

Usage Code:

使用代码：

<div class="navbar-xs">
   <div class="navbar-primary">
       <nav class="navbar navbar-static-top" role="navigation">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8">
                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Brand</a>
          </div>
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8">
              <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#">Link</a></li>
                   <li><a href="#">Link</a></li>
              </ul>
          </div><!-- /.navbar-collapse -->
      </nav>
  </div>
</div>

Answer 2

回答by Ranveer

Working solution:

工作解决方案：

Bootstrap 3.0 by default has a 15px padding on top and bottom, so we just need to override it!

Bootstrap 3.0 默认在顶部和底部有一个 15px 的填充，所以我们只需要覆盖它！

For example:

例如：

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

Answer 3

回答by patrick

Simply override the min-height set in .navbar like so:

只需像这样覆盖 .navbar 中设置的最小高度：

.navbar{
  min-height:20px; //* or whatever height you require
}

Altering an elements height to something smaller than the min-height won't make a difference...

将元素高度更改为小于最小高度的值不会有什么不同......

Answer 4

回答by AJ Meyghani

if you are using the less source, there should be a variable for the navbar height in the variables.lessfile. If you are not using the source, then you can customize it using the customizeutilty that bootstrap's site provides. And then you can downloaded it and include it in your project. The variable you are looking for is: @navbar-height

如果您使用的是 less 源，则文件中应该有一个用于导航栏高度的变量variables.less。如果您没有使用源代码，那么您可以使用bootstrap 站点提供的自定义实用程序对其进行自定义。然后您可以下载它并将其包含在您的项目中。您正在寻找的变量是：@navbar-height

Answer 5

回答by Hoàng V? Tgtt

This is my experience

这是我的经验

 .navbar { min-height:38px;   }
 .navbar .navbar-brand{ padding: 0 12px;font-size: 16px;line-height: 38px;height: 38px; }
 .navbar .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 38px; }
 .navbar .navbar-toggle {  margin-top: 3px; margin-bottom: 0px; padding: 8px 9px; }
 .navbar .navbar-form { margin-top: 2px; margin-bottom: 0px }
 .navbar .navbar-collapse {border-color: #A40303;}

change height of navabr to 38px

将 navabr 的高度更改为 38px

Answer 6

回答by Brian

If you guys are generating your stylesheets with LESS/SASS and are importing Bootstrap there, I've found that overriding the @navbar-height variable lets your set the height of the navbar, which is originally defined in the variables.less file.

如果你们使用 LESS/SASS 生成样式表并在那里导入 Bootstrap，我发现覆盖 @navbar-height 变量可以让您设置导航栏的高度，该高度最初是在 variables.less 文件中定义的。

Answer 7

回答by Tahir Khalid

Wanted to added my 2 pence and a thank you to James Poulose for his original answer it was the only one that worked for my particular project (MVC 5 with the latest version of Bootstrap 3).

想要添加我的 2 便士，并感谢 James Poulose 的原始回答，这是唯一适用于我的特定项目（MVC 5 和最新版本的 Bootstrap 3）的答案。

This is mostly aimed at beginners, for clarity and to make future edits easier I suggest you add a section at the bottom of your CSS file for your project for example I like to do this:

这主要是针对初学者的，为了清晰起见并使以后的编辑更容易，我建议您在项目的 CSS 文件底部添加一个部分，例如我喜欢这样做：

/* Bootstrap overrides */

.some-class-here {
}

Taking James Poulose's answer above I did this:

按照上面 James Poulose 的回答，我做了这个：

/* Bootstrap overrides */   
.navbar-nav > li > a { padding-top: 8px !important; padding-bottom: 5px !important; }
.navbar { min-height: 32px !important; }
.navbar-brand { padding-top: 8px; padding-bottom: 10px; padding-left: 10px; }

I changed the padding-top values to push the text down on my navbar element. You can pretty much override any Bootstrap element like this and its a good way of making changes without screwing up the Boostrap base classes because the last thing you want to do is make a change in there and then lose it when you updated Bootstrap!

我更改了 padding-top 值以将文本向下推到我的导航栏元素上。您几乎可以像这样覆盖任何 Bootstrap 元素，这是一种在不搞砸 Boostrap 基类的情况下进行更改的好方法，因为您要做的最后一件事是在那里进行更改，然后在更新 Bootstrap 时丢失它！

Finally for even more separation I like to split up my CSS files and use @import declarations to import your sub-files into one main CSS File for easy management for example:

最后，为了进一步分离，我喜欢拆分我的 CSS 文件并使用 @import 声明将您的子文件导入一个主 CSS 文件以便于管理，例如：

@import url('css/mysubcssfile.css');

note: if you're pulling in multiple files you need to make sure they load in the right order.

注意：如果您要拉入多个文件，则需要确保它们以正确的顺序加载。

Hope this helps someone.

希望这可以帮助某人。

Answer 8

回答by James Poulose

I think we can write this fewer styles, without changing the existing color. The following worked for me (in Bootstrap 3.2.0)

我认为我们可以在不改变现有颜色的情况下编写更少的样式。以下对我有用（在 Bootstrap 3.2.0 中）

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

The last one ('navbar-brand') is actually needed only if you have text as your 'brand' name.

最后一个（'navbar-brand'）实际上只有在您将文本作为“品牌”名称时才需要。

Answer 9

回答by Usman I

I got the same problem, the height of my menu bar provided by bootstrap was too big, actually i downloaded some wrong bootstrap, finally get rid of it by downloading the orignal bootstrap from this site.. http://getbootstrap.com/2.3.2/want to use bootstrap in yii( netbeans) follow this tutorial, https://www.youtube.com/watch?v=XH_qG8gphaw... The voice is not present but the steps are slow you can easily understand and implement them. Thanks

我遇到了同样的问题，bootstrap提供的菜单栏高度太大，实际上我下载了一些错误的bootstrap，最后通过从该站点下载原始bootstrap来摆脱它.. http://getbootstrap.com/2.3 .2/想在yii(netbeans)中使用bootstrap，按照这个教程，https://www.youtube.com/watch? v=XH_qG8gphaw ...语音不存在但是步骤很慢你可以很容易地理解和实现他们。谢谢

twitter-bootstrap 降低引导程序 3.0 导航栏的高度

提问by irfanmcsd

回答by irfanmcsd

回答by Ranveer

回答by patrick

回答by AJ Meyghani

回答by Hoàng V? Tgtt

回答by Brian

回答by Tahir Khalid

回答by James Poulose

回答by Usman I

相关推荐

最近更新

标签

twitter-bootstrap 降低引导程序 3.0 导航栏的高度

提问by irfanmcsd

回答by irfanmcsd

回答by Ranveer

回答by patrick

回答by AJ Meyghani

回答by Hoàng V? Tgtt

回答by Brian

回答by Tahir Khalid

回答by James Poulose

回答by Usman I

相关推荐

twitter-bootstrap 如何使用引导程序日期选择器

twitter-bootstrap Bootstrap 3 列问题

twitter-bootstrap 引导程序 3 - 在显示之间清除共享的远程模式内容？

twitter-bootstrap Bootstrap 3：字形跨度内的字体系列

相关推荐

最近更新

标签