twitter-bootstrap 有没有办法改变 Bootstrap 导航栏高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17493642/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to change the Bootstrap Navbar Height?
提问by ajdigregorio
I'm designing a website using Twitter's Bootstrap, and I'm having difficulty with the responsive navbar. In bootstrap, the navbar allows a mobile user to click an icon to extend the navbar and display navigation links. I'm unable to find how to adjust the maximum height... when I try and use one of the drop down bars, the navbar doesn't change size accordingly, and the user is unable to see any of the links.
我正在使用 Twitter 的 Bootstrap 设计一个网站，但我在使用响应式导航栏时遇到了困难。在引导程序中，导航栏允许移动用户单击图标以扩展导航栏并显示导航链接。我无法找到如何调整最大高度...当我尝试使用其中一个下拉栏时，导航栏不会相应地更改大小，并且用户无法看到任何链接。
Thanks for any help you can provide.
感谢您的任何帮助，您可以提供。
-A
-一个
EDIT: here's the code that I'm using for the navbar (html) the css that I'm using is the standard bootstrap.css and bootrstrap-responsive.css:
编辑：这是我用于导航栏 (html) 的代码，我使用的 css 是标准的 bootstrap.css 和 bootrstrap-responsive.css：
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="http://example.com">organization</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li class="active"><a href="contact.html">Contact</a></li>
<li><a href="nowplaying.html">Now Playing</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Public Resources <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="public.html#observatory">Observatory</a></li>
<li><a href="public.html#planetarium">Planetarium</a></li>
<li class="divider"></li>
<li class="nav-header">For Teachers and Schools</li>
<li><a href="schools.html#programs">Programs</a></li>
<li><a href="schools.html#events">Host an Event</a></li>
<li><a href="schools.html#education">Educational Initiatives</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Undergraduate Resources <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="students.html#observatory">Observatory</a></li>
<li><a href="students.html#planetarium">Planetarium</a></li>
<li class="divider"></li>
<li class="nav-header">Physics</li>
<li><a href="xxx.com">Physics Homepage</a></li>
<li><a href="xxx.com">Physics and Astronomy</a></li>
</ul>
</li>
<li><a href="volunteer.html">Volunteer</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
采纳答案by ajdigregorio
Ok, the way I fixed the first part (having a header that didn't resize when I wanted to) was by changing the min width value in the bootstrap-responsive.css like so:
好的，我修复第一部分的方法（当我想调整标题时没有调整大小）是通过更改 bootstrap-responsive.css 中的最小宽度值，如下所示：
@media (min-width: 1200px) {
.nav-collapse.collapse {
height: auto !important;
overflow: visible !important;
}
}
where 1200pxwas changed to 1200 from 980. Tricky tricky... for the record, it's on line 1104.
where1200px已从 980 更改为 1200。Tricky 棘手......为了记录，它在第 1104 行。
回答by António Regadas
The default navbar html code is the following:
默认导航栏 html 代码如下：
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
And if you inspect the navbar element you will find that the inside div (navbar-inner) has the class:
如果您检查导航栏元素，您会发现内部 div (navbar-inner) 具有以下类：
.navbar-inner {
min-height: 40px;
}
You can remove this value and find that the navbar remains the same height, that's normal, because the height of the navbar is set to "auto". Therefore if you remove the min-heightthe height will depend of the link tags padding, inside the <ul></ul>, and the <a class="brand"></a>padding as well.
你可以去掉这个值，发现导航栏的高度保持不变，这是正常的，因为导航栏的高度设置为“自动”。因此，如果您删除min-height高度将取决于链接标签的内边距、内边距<ul></ul>和内<a class="brand"></a>边距。
.navbar .nav > li > a {
float: none;
**padding: 10px 15px 10px;**
color: #777;
text-decoration: none;
text-shadow: 0 1px 0 #FFF;
}
.navbar .brand {
display: block;
float: left;
**padding: 10px 20px 10px;**
margin-left: -20px;
font-size: 20px;
font-weight: 200;
color: #777;
text-shadow: 0 1px 0 #FFF;
}
If you change it, you will find that the height of the "navbar" parent will automatically change. You can also maintain the min-heightproperty and just change its value, adjusting the padding of the elements I've mentioned above.
如果你改变它，你会发现“导航栏”父级的高度会自动改变。您还可以维护该min-height属性并更改其值，调整我上面提到的元素的填充。
For the responsive part, you can edit all the styles in the bootstrap-responsive.css, inside the specific media query for the resolution that you want to edit.
对于响应式部分，您可以在bootstrap-responsive.css要编辑的分辨率的特定媒体查询中编辑 , 中的所有样式。
EDIT: Just saw your HTML, check the padding of your link tags inside the navbar, reduce it, change the .navbar-innermin-heighttoo, and play with the values.
编辑：刚刚看到您的 HTML，检查导航栏中链接标签的填充，减少它，更改.navbar-innermin-height太，并使用值。
