自定义高度Bootstrap的导航栏

我想要一个包含导航栏的高度为150px的标题。 导航栏应该在标题中垂直居中。

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

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

导航/菜单/垂直列performance在在标题的右上angular。 我如何让它垂直居中? bootstrap.css是未定制的。

你的标记有点搞砸了。 这是你需要的样式和正确的HTML

CSS

 .navbar-brand, .navbar-nav li a { line-height: 150px; height: 150px; padding-top: 0; } 

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> 

或者查看小提琴: http : //jsfiddle.net/TP5V8/1/

您还需要设置.min-height: 0px; 请见下图:

 .navbar-inner { min-height: 0px; } .navbar-brand, .navbar-nav li a { line-height: 150px; height: 150px; padding-top: 0; } 

如果你设置.min-height: 0px; 那么你可以select任何你想要的高度!

祝你好运!

我相信你正在使用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> 

对于Bootstrap 4,现在有了间隔工具,因此通过导航链接上的填充来更改高度更加容易。 这只能在特定的断点处(如: py-md-3 )作出响应。 例如,在较大的(md)屏幕上,此导航栏的高度为120px,然后缩小到移动菜单的正常高度。 没有额外的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> 

Bootstrap 4导航栏高度演示