我想在Twitter Bootstrap 3.1.1中做一个具有指定高度的完整响应式导航栏,其中品牌可以包含图像(徽标)或文本 .
HTML:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<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="http://placehold.it/150x50&text=Logo" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
CSS:
body {
margin-top: 125px;
}
.navbar-fixed-top .nav {
padding: 15px 0;
}
问题是,在浏览器的窗口大小减小并且菜单折叠后,导航栏将返回其原始高度,徽标图像如下所示:
另一个问题是将 <img src="http://placehold.it/150x50&text=Logo" alt="">
更改为 <h3>AppName</h3>
会使AppName不在中间:
目前它通过设置填充值来居中,但我不知道如何让它独立于它 .
有谁能帮我解决这个问题?
问候
EDIT:
以下是我想要实现的效果的准备图像:
没有折叠的导航栏与徽标图像:
折叠导航栏(导航栏高度相同,图像大小相同,但导航栏宽度不同):
没有折叠带有品牌名称文字的导航栏:
折叠导航栏(除了更改浏览器窗口宽度导致的导航栏宽度外,一切都相同):
6 回答
如果你想实现this(你可以调整窗口大小以查看移动版本的外观),你所要做的就是拥有2个徽标图像(1个用于桌面,1个用于移动)并根据环境显示它们使用
visible-xs
和hidden-xs
类 .所以我使用了这样的东西:
当然,我使用以下方式设计移动徽标:
你可以看到所有的代码here . 如果你需要一个关于徽标的移动版本的文本,这不是什么大不了的事 . 只需用
<h1 class="visible-xs">AppName</h3>
替换徽标,然后更改媒体查询中的样式,如下所示:编辑:
你需要这个条件来使它工作:
在
navbar-inner
类和容器中添加品牌徽标的最佳方法 . 关于<h3>
问题<h3>
在bootstrap中有一定的填充,正如@creimers所说 . 如果您使用的是较大的图像,请增加导航栏的高度,否则徽标会浮动到外面 .您所包含的占位符图片的高度为
50px
. 它包含在anchor (.navbar-brand)
中,padding-top
为15px
,高度为50px
. 通过为class
或id
分配's why the placeholder logo flows out of the bar. Try including a smaller image or play with the anchor'填充,您可以在_2495669中引用它 .EDIT 或者从
.navbar-brand
中删除静态height: 50px
. 然后,您的导航栏将采用其最高子项的高度 .默认情况下,
h3
在bootstrap中的padding-top
为20px
. 再一次,它被padding-top: 15px
锚包裹着 . 's why it'不像你想要的那样垂直居中 . 您可以给h3
class
或id
重置margin-top . 你可以用anchor
的padding
做同样的事情 .这里有一些东西可以玩:http://jsbin.com/jelec/1/edit?html,output
我查了一下,它对我有用 .
只需设置添加该徽标的高度和宽度即可 . 我试过并且工作正常
我设置
.navbar-brand { min-height: inherit }
为我解决了这个问题(感谢@creimers的灵感) .