自定义高度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导航栏高度演示
