bootstrap 3：navbar-brand放logo图片

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>

bootstrap 3：navbar-brand放logo图片

相关文章