bootstrap twitter导航栏中的徽标重叠答案

【问题标题】：Logo overlap in bootstrap twitter navbarbootstrap twitter导航栏中的徽标重叠
【发布时间】：2016-03-13 19:25:36
【问题描述】：

我想让我的徽标与我的导航栏重叠，但我不知道怎么做。我试图增加图片的大小，但没有成功，导航栏只是扩大了。我也希望它在同一个 div 类中，因为否则它在网站的移动版本上不会很好。我将添加它的外观以及我想要它是什么以及代码的图片。提前致谢

代码：  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container">  <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>

【问题讨论】：

请通过提供JSFiddle或CodePen在代码中添加起点，图片不是起点。另见stackoverflow.com/help/mcve

标签： html css twitter-bootstrap graphical-logo

【解决方案1】：

给你的标志一个“标志”类，然后添加：

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

同时修复您的导航栏。

希望有帮助！

【讨论】：

【解决方案2】：

只需将徽标放在导航栏 div 之外。并将其对齐 top:0px left:0px。

或者，如果您希望徽标始终位于左侧，则只需将其向左浮动即可。

【讨论】：