Css 引导程序3:当徽标增加导航栏的高度时,垂直居中导航链接
我不熟悉引导框架 增加导航栏高度的徽标: 在我的导航栏中,我插入了一个高度为50px的徽标。这显然使导航栏更高。我没有为此调整任何CSS,它只是迫使增加高度的徽标 问题: 导航栏中的链接与现在较高的导航栏顶部对齐 目标: 我希望链接垂直居中的导航栏,因为这将看起来更好Css 引导程序3:当徽标增加导航栏的高度时,垂直居中导航链接,css,twitter-bootstrap,twitter-bootstrap-3,Css,Twitter Bootstrap,Twitter Bootstrap 3,我不熟悉引导框架 增加导航栏高度的徽标: 在我的导航栏中,我插入了一个高度为50px的徽标。这显然使导航栏更高。我没有为此调整任何CSS,它只是迫使增加高度的徽标 问题: 导航栏中的链接与现在较高的导航栏顶部对齐 目标: 我希望链接垂直居中的导航栏,因为这将看起来更好 我的假设是玩线高度值或填充。然而,这就带来了一个问题,即在移动浏览器上仍然有效(当它切换到切换菜单时),因此我的扩展菜单最终太高,看起来很傻 非常感谢您的任何见解 My CSS是最新版本3.0.2下载的默认引导CSS 这是我的H
我的假设是玩线高度值或填充。然而,这就带来了一个问题,即在移动浏览器上仍然有效(当它切换到切换菜单时),因此我的扩展菜单最终太高,看起来很傻 非常感谢您的任何见解 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”链接与顶部对齐,而我确实希望它们在中心垂直对齐。使用生成具有更高导航条的引导版本。要更改的值是中的@navbar height
检查您当前的实现,查看您的导航栏与50px品牌图像的高度,并在定制程序中使用计算出的高度。将其添加到样式表中。线条高度应与徽标的高度相匹配
.navbar-nav li a {
line-height: 50px;
}
查看小提琴:Bootstrap将导航栏的高度自动设置为50px。链接上方和下方的填充设置为15px。我认为bootstrap为您的徽标添加了填充物 您可以删除徽标上方和下方的一些填充,也可以在链接上方和下方添加更多填充 添加更多填充应该如下所示:
nav.navbar-inverse>li>a {
padding-top: 25px;
padding-bottom: 25px;
}
Matt的答案很好,但为了避免这种情况传播到导航栏中的其他元素(比如当您还有下拉菜单时),请使用
我发现你不一定需要垂直居中的文本,它在靠近行底部的地方看起来也不错,只有当它在顶部(或中心上方?)时,它看起来才是错误的。因此,我将链接推到行的底部:
.navbar-brand {
min-height: 80px;
}
@media (min-width: 768px) {
#navbar-collapse {
position: absolute;
bottom: 0px;
left: 250px;
}
}
我的品牌形象是SVG,我使用了
高度:50px;宽度:自动
,宽度约为216px。它从容器中垂直溢出,所以我添加了minheight:80px代码>为它和bootstrap的15px边距腾出空间。然后我调整了navbar collapse
的left
设置,直到它看起来正确为止。事实上,我最终得到了类似这样的结果,以允许navbar折叠
@media (min-width: 768px) { //set this to wherever the navbar collapse executes
.navbar-nav > li > a{
line-height: 7em; //set this height to the height of the logo.
}
}
谢谢你的建议。我希望只使用下载包的默认版本,然后对自定义CSS文件进行自定义。我的另一个问题是,我最终需要在页面上有两个导航菜单,其中一个是短的,另一个是高的(以适应徽标)。所以,我真的需要知道CSS的目标是什么。谢谢@Matt Lambert的建议。我也有这样的想法。该方法的问题在于,当您在移动(小屏幕)设备上查看时,line height参数会使下拉菜单导航方式变为tall。结果看起来很奇怪。所以,在桌面端,它可以工作,但是关于它如何在移动端表现良好,有什么想法吗?是的,只需覆盖媒体查询中的行高值,使其与正确的高度匹配即可。这就是为什么我讨厌前端工作。我已经做了几个小时了,解决方案很简单。嘿,这让我有工作:)嘿,你们能扩展一下媒体查询扩展吗?我已经把它放在我的样式表.navbar-nav-li a{lineheight:50px;}@media(max-width:@screen-xs-max){.navbar-nav-li a{lineheight:50px;}}}
中,我不确定它为什么不工作。
@media (min-width: 768px) { //set this to wherever the navbar collapse executes
.navbar-nav > li > a{
line-height: 7em; //set this height to the height of the logo.
}
}