徽标重叠在bootstrap twitter导航栏中

时间:2016-03-13 19:25:37

标签: html css twitter-bootstrap graphical-logo

我想让我的徽标重叠我的导航栏,但我不知道如何。我试图增加图片的大小,但没有成功,导航栏只是放大了。我也希望它在同一个div类中,因为它在网站的移动版本上不会很好。我将添加它看起来像什么,我想要它和代码的图片。提前致谢

代码: <!-- Navigation --> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <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> <img style="max-width:80px; margin-top:0px;" src="img/logo.png" class="logo navbar-brand"> <a class="navbar-brand" rel="home" href="index.html"><b>MY WEBSITE</b></a> </div>

2 个答案:

答案 0 :(得分:1)

为您的徽标添加一类“徽标”,然后添加:

.logo {
 position: fixed;
 top: 1em;
 left: 1em;
 display: inline;
}

修复导航栏。

希望有所帮助!

答案 1 :(得分:0)

只需将徽标放在导航条div之外。并将其对齐顶部:0px左:0px。

或者,如果您想要左侧的徽标,那么只需向左浮动。