bootstrap 3的navbar-brand默认是放文字的,如:
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
也可以放图片,但必须是小图片:
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
如果图片太大,位置就会靠下:
对于这个问题,在这里有讨论:http://stackoverflow.com/questions/18474564/bootstrap-3-navbar-with-logo
最高票回答建议不用navbar-brand
,而用navbar-left
,然后在img里自行控制图片位置,并认为navbar-brand
只用于文字,不能用于图片(但实际上官方文档有示例用图片的,只不过图片较小):
<div class="navbar-header">
<a href="#" class="navbar-left">
<img src="/path/to/image.png">
</a>
</div>
第二高票答案,则相对简单,直接在img里面加负值的margin-top,如margin-top:-7px;
。实际使用这种效果较好,图片左侧与屏幕之间会自动有间隙,显得更好看。
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" style="max-width:100px;margin-top:-7px;" src="...">
</a>
</div>