e2

滴滴侠,fai抖

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

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>

posted on 2019-11-08 11:22  纯黑Se丶  阅读(789)  评论(0编辑  收藏  举报