我刚接触bootstrap框架。
增加NavBar高度的标识:
在导航栏中,我插入了一个高度为50px的徽标。这显然会使导航栏变得更高。我没有为此调整任何CSS,它只是标志,这是迫使增加的高度。
问题:
导航栏中的链接与现在更高的导航栏的顶部对齐。
目标:
我希望链接垂直居中的导航栏,因为那样会看起来更好。
我的假设是使用行高值或填充。然而,这带来了在移动浏览器上仍然有效的问题(当它切换到切换菜单时),所以我的扩展菜单最终变得太高,看起来很傻。
有什么见解是非常感谢的吗?
My CSS是使用最新版本3.0.2下载的默认引导CSS。
这是我的HTML:
<!-- Begin NavBar -->
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".menu2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand" href="#"><img src="img/logo.png" width="210" height="50" alt="My Logo"></span>
</div>
<div class="navbar-collapse collapse menu2">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
是那些“链接1”、“链接2”、“链接3”和“链接4”的链接对齐到顶部,而我真的希望它们在中心垂直对齐。
发布于 2013-11-08 07:22:28
将此代码添加到样式表中。线条高度应与您的徽标高度相匹配
.navbar-nav li a {
line-height: 50px;
}
请访问:http://jsfiddle.net/nD4tW/查看小提琴
发布于 2015-07-16 23:24:36
Matt的回答很好,但为了避免这一点传播到导航栏中的其他元素(比如当您还有一个下拉菜单时),可以使用
.navbar-nav > li > a {
line-height: 50px;
}
发布于 2013-11-08 06:02:11
使用Bootstrap Customizer生成具有更高导航栏的引导程序版本。您想要更改的值是Navbar section中的@navbar-height
。
检查您当前的实现,查看带有50px品牌图像的导航栏有多高,并在Customizer中使用计算出的高度。
https://stackoverflow.com/questions/19844561
复制相似问题