Html 自定义高度 Bootstrap 的导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19837444/
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
Custom height Bootstrap's navbar
提问by yoeriboven
I want a header with a height of 150px which contains a navbar. The navbar should be vertically centered in the header.
我想要一个高度为 150 像素的标题，其中包含一个导航栏。导航栏应在标题中垂直居中。
HTML:
HTML:
<header>
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container" style="background:yellow;">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-th-list"></span>
</a>
<a href="/"><img src="img/logo.png" class="logo" /></a>
<nav class="nav-collapse collapse pull-right" style="line-height:150px; height:150px;">
<ul class="nav" style="display:inline-block;">
<li><a href="">Portfolio</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
CSS:
CSS:
header {
width: 100%;
line-height: 150px;
color:red;
height: 150px;
.navbar-inner {
border:0;
border-radius: 0;
background: blue;
padding:0;
margin:0;
height: inherit;
}
}
The nav/menu/vertical list is now in the top right of the header. How do I get it to center vertically? bootstrap.css is uncustomized.
导航/菜单/垂直列表现在位于标题的右上角。如何让它垂直居中？bootstrap.css 是未定制的。
回答by Matt Lambert
your markup was a bit messed up. Here's the styles you need and proper html
你的标记有点乱。这是您需要的样式和适当的 html
CSS:
CSS:
.navbar-brand,
.navbar-nav li a {
line-height: 150px;
height: 150px;
padding-top: 0;
}
HTML:
HTML:
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#"><img src="img/logo.png" /></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="">Portfolio</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</nav>
Or check out the fiddle at: http://jsfiddle.net/TP5V8/1/
或查看小提琴：http: //jsfiddle.net/TP5V8/1/
回答by Valeri Crudu
You need also to set .min-height: 0px;please see bellow:
您还需要设置，.min-height: 0px;请参见以下内容：
.navbar-inner {
min-height: 0px;
}
.navbar-brand,
.navbar-nav li a {
line-height: 150px;
height: 150px;
padding-top: 0;
}
If you set .min-height: 0px;then you can choose any height you want!
如果你设置了，.min-height: 0px;那么你可以选择任何你想要的高度！
Good Luck!
祝你好运！
回答by Zim
For Bootstrap 4, there are now spacing utilitiesso it's easier to change the height via padding on the nav links. This can be responsively applied only at specific breakpoints (ie: py-md-3). For example, on larger (md) screens, this nav is 120px high, then shrinks to normal height for the mobile menu. No extra CSS is needed..
对于 Bootstrap 4，现在有间距实用程序，因此可以更轻松地通过导航链接上的填充来更改高度。这可以仅在特定断点（即：）上响应地应用py-md-3。例如，在较大的 (md) 屏幕上，此导航为 120 像素高，然后缩小到移动菜单的正常高度。不需要额外的 CSS ..
<nav class="navbar navbar-fixed-top navbar-inverse bg-primary navbar-toggleable-md py-md-3">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
<div class="navbar-collapse collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item py-md-3"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item py-md-3"><a href="#" class="nav-link">Link</a></li>
<li class="nav-item py-md-3"><a href="#" class="nav-link">Link</a></li>
<li class="nav-item py-md-3"><a href="#" class="nav-link">More</a></li>
<li class="nav-item py-md-3"><a href="#" class="nav-link">Options</a></li>
</ul>
</div>
</nav>
回答by Able Alias
I believe you are using Bootstrap 3. If so, please try this code, here is the bootply
我相信您正在使用 Bootstrap 3。如果是这样，请尝试此代码，这是bootply
<header>
<div class="navbar navbar-static-top navbar-default">
<div class="navbar-header">
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-th-list"></span>
</a>
</div>
<div class="container" style="background:yellow;">
<a href="/">
<img src="img/logo.png" class="logo img-responsive">
</a>
<nav class="navbar-collapse collapse pull-right" style="line-height:150px; height:150px;">
<ul class="nav navbar-nav" style="display:inline-block;">
<li><a href="">Portfolio</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>
