bootstrap 3:navbar-brand放logo图片

2017-02-06 12:43 阅读

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>

咨询
交流群
电话