降低引导程序 3.0 导航栏的高度
Posted
技术标签:
【中文标题】降低引导程序 3.0 导航栏的高度【英文标题】：Decreasing height of bootstrap 3.0 navbar 【发布时间】：2013-09-07 03:07:56 【问题描述】：我正在尝试降低与固定顶部行为一起使用的引导 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-smbackground-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;
结果
从屏幕上可以看出，导航栏的输出减少了，但高度没有减少。原始高度以粉红色显示。
上面的 css 脚本在 bootstrap 2 中几乎可以正常工作。*
有什么方法可以适当降低高度。
【问题讨论】：
在 Bootstrap 3 中不再需要 navbar-inner 是我的自定义类。与 bootstrap 3.0 无关。 这个链接解释了对我有用的唯一方法：***.com/questions/19576175/… 它只用两行代码降低了导航栏的高度 【参考方案1】：如果您使用的是 less 源，variables.less 文件中应该有一个用于导航栏高度的变量。如果您不使用源代码，则可以使用引导程序站点提供的 customize 实用程序对其进行自定义。然后您可以下载它并将其包含在您的项目中。您要查找的变量是：@navbar-height
【讨论】：
但我不想改变原来的导航栏行为。我只是改变额外顶部导航栏的高度。 我认为这是最好的解决方案。 如果站点上只有一个导航并且它应该是那个高度，这是最好的解决方案。如果您有多个导航，它会变得有点困难，因为 .navbar-vertical-align 在多个地方使用并且对@navbar-height 有硬引用。 不错的解决方案。只要你不打算使用 CDN 只要您在单独的 Less 部分中使用覆盖，这是最好的解决方案，应该允许您毫无问题地升级引导程序。【参考方案2】：花了几个小时后，添加以下 css 类解决了我的问题。
使用 Bootstrap 3.0.*
.tnav .navbar .container height: 28px;
使用 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;
更新 完整的代码来自定义和减少导航栏的高度与截图。
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;
使用代码：
<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>
【讨论】：
这不起作用...检查我在此页面上的答案... .navbar 的最小高度默认设置为 50px，因此如果您将高度设置为 28px，它将是被 50px 最小高度覆盖... 啊，我看到这篇文章被编辑了（很多！）现在确实显示了正确的代码。我还看到我在这里的帖子中建议的最小高度设置，由于某种原因得到了反对票。对正确、切题和清晰的答案投反对票是非常令人沮丧的...... @patrick 不知道你的意思，但有时我的问题已经用我自己的答案解决了。声誉毫无疑问，如果人们给我投票赞成或反对。 编辑源代码会更容易 有趣的是，这些对我不起作用。我不得不覆盖 50px 的固定高度；【参考方案3】：只需像这样覆盖 .navbar 中设置的最小高度：
.navbar
min-height:20px; //* or whatever height you require
将元素高度更改为小于最小高度的值不会产生影响...
【讨论】：
正如您在导航栏中看到的那样，我已经使用了 height 属性但没有效果。 这是 min-height 属性，而不是 height...如果您将 height 设置为低于 min-height 的数字，则 min-height 将阻止它变小...跨度> 为什么会遭到反对？这是这篇文章中设定问题的有效解决方案。版主可以看看这个吗，似乎有一个反对者在没有检查实际答案的情况下简单地反对他不同意的东西。在我的帖子得到相同答案后的 2.5 个月后，一个链接进一步发布，位于外部链接上，并获得了两个支持。我讨厌人们用随机的反对票来稀释 SO！ 我经常问自己，现在人们是如何获得反对票的，你会收到通知吗？在 meta 上找不到这个 没有通知...如果人们认为另一个答案更好或什么的，他们似乎会投反对票...我不知道...在这种情况下，问这个问题的人在他的自己的答案并接受了那个答案......如果你问我有点蹩脚......但话说回来，这个网站不是关于自我，而是关于帮助他人......【参考方案4】：工作解决方案：
默认情况下，Bootstrap 3.0 在顶部和底部都有 15px 的填充，所以我们只需要覆盖它！
例如：
.navbar-nav > li > a padding-top:10px !important; padding-bottom:10px !important;
.navbar min-height:40px !important
【讨论】：
bootstrap.css中默认是10px？ .navbar-nav > li > a padding-top: 10px;底部填充：10px；行高：20px； 查看 bootstrap.css (v3.0.2) 中的第 3884 行。默认为.navbar-nav > li > a padding-top: 15px; padding-bottom: 15px;。
不确定 v3.0.2。但是在 bootstrap.css 的 v3.0.3 第 4541 行中，它是：.navbar-nav > li > a padding-top: 10px;底部填充：10px；行高：20px；
你，先生，是我的英雄。【参考方案5】：
这是我的经验
.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;
【讨论】：
添加这个来处理 .navbar-form:.navbar .navbar-form margin-top: 2px; margin-bottom: 0px
另一个扩展名：.navbar .navbar-text margin-top: 0px;边距底部：0px；行高：38px； 【参考方案6】：
我认为我们可以在不改变现有颜色的情况下编写更少的样式。以下对我有用（在 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;
最后一个（'navbar-brand'）实际上只有在您将文本作为“品牌”名称时才需要。
【讨论】：
很好的答案，这是唯一一个对我使用最新版本的 Bootstrap 3 有效的方法（注意：如果你想把你的文本向下推，增加 .navbar-brand 类的 padding-top 值以及 .navbar-nav > li > a 类。【参考方案7】：我遇到了同样的问题，我的bootstrap提供的菜单栏高度太大，实际上我下载了一些错误的bootstrap，最后通过从这个站点下载原始bootstrap来摆脱它..http://getbootstrap.com/2.3.2/ 想在 yii(netbeans) 中使用引导程序，请遵循本教程， https://www.youtube.com/watch?v=XH_qG8gphaw... 声音不存在，但步骤很慢，您可以轻松理解和实施它们。 谢谢
【讨论】：
为了得到想要的效果，你对代码做了哪些改动？如果您指向答案中的链接，您应该总结解决方案。【参考方案8】：如果你们使用 LESS/SASS 生成样式表并在那里导入 Bootstrap，我发现覆盖 @navbar-height 变量可以让您设置导航栏的高度，该高度最初在 variables.less 中定义文件。
【讨论】：
【参考方案9】：想加我的 2 便士，并感谢 James Poulose 的原始回答，这是唯一适用于我的特定项目（MVC 5 和最新版本的 Bootstrap 3）。
这主要针对初学者，为了清楚起见并让以后的编辑更容易，我建议您在项目的 CSS 文件底部添加一个部分，例如我喜欢这样做：
/* Bootstrap overrides */
.some-class-here
按照上面 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;
我更改了 padding-top 值以将文本向下推到我的导航栏元素上。您几乎可以像这样覆盖任何 Bootstrap 元素，这是一种在不破坏 Boostrap 基类的情况下进行更改的好方法，因为您要做的最后一件事就是在其中进行更改，然后在更新 Bootstrap 时将其丢失！
最后，为了进一步分离，我喜欢拆分我的 CSS 文件并使用 @import 声明将您的子文件导入到一个主 CSS 文件中以便于管理，例如：
@import url('css/mysubcssfile.css');
注意：如果您要拉入多个文件，您需要确保它们以正确的顺序加载。
希望这对某人有所帮助。
【讨论】：
以上是关于降低引导程序 3.0 导航栏的高度的主要内容，如果未能解决你的问题，请参考以下文章