我的解决方案是添加css“display: inline-block”到img标签。

<img style="display: inline-block; height: 30px; margin-top: -5px">

演示：杰斯菲德尔

我的工作代码- bootstrap 3.0.3。 当导航条切换，隐藏的x原始标志图像。

    <a class="navbar-brand hidden-xs" href="<?=$g4['path']?>/">
    <img src="<?=$g4[path]?>/images/logo_opencode.gif" align=absmiddle alt="brand logo">
    </a>

    <a class="navbar-brand navbar-toggle" href="<?=$g4['path']?>/" style="border:0;margin-bottom:0;">
    <img src="<?=$g4[path]?>/images/logo_opencode.gif" alt="brand logo" style="width:120px;">
    </a>

你必须像这样使用代码:

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="logo" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style=""
             src="/img/transparent-white-logo.png">
    </a>
</div>

A类标签必须是“logo”而不是navbar-brand。

虽然你的问题很有趣，但我不认为会有一个答案。也许你的问题太宽泛了。 你的解决方案应该取决于:导航栏中的其他内容(条目的数量)，你的logo的大小，你的logo是否响应，等等。 在a中添加logo(使用navbar-brand)似乎是一个很好的起点。我应该使用navbar-brand类，因为这将添加一个15像素的填充(顶部/底部)。

我在http://getbootstrap.com/examples/navbar/上用300x150像素的logo测试了这个设置。

全屏> 1200:

768到992像素之间(菜单未折叠):

<768(菜单折叠)

除了美学方面，我没有发现任何技术问题。在小屏幕上，大标志可能会重叠或打破视口。 在768到992像素之间的屏幕上，当内容不在一条线上时，还会出现其他问题，例如:https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18

默认的导航栏示例添加了一个30px的底边距，所以你的导航栏的内容永远不会与你的页面的内容重叠。(固定导航栏会有问题时，导航栏的高度变化)。

您将需要一些css和媒体查询，以适应导航栏在不同屏幕尺寸上的需要。请缩小你的问题范围。B.e.描述一下你在android上发现的问题。

更新示例请参见http://bootply.com/77512。

在手机等较小的屏幕上，折叠菜单出现在logo上方

在代码中转换按钮和logo，首先是logo(设置float: logo上的左)

除了顶部，没有办法将菜单项对齐到任何地方

为.navbar-collapse ul设置margin-top。使用标志高度减去导航栏高度，以对齐到底部或(标志高度-导航栏高度)/ 2到中心

在我的情况下，没有让任何其他答案工作(我可能没有通过智力测试)，经过一些实验，这是我正在使用的(我相信非常接近Bootstrap默认值):

   <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </button>
         <div class="navbar-logo">
            <a class="navbar-brand" rel="home" href="@Url.Action("Index", "Home")" title="Home">
               <img src="~/Images/logo.png" class="img-responsive">
            </a>
         </div>
         <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav">
               <li>@Html.ActionLink("Home", "Index", "Home")</li>
               <li>@Html.ActionLink("Coaching", "Coaching", "Home")</li>
               <li>@Html.ActionLink("Resources", "Resources", "Home")</li>
               <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
               <li>@Html.ActionLink("Blog", "Blog", "Home")</li>
               <li>@Html.ActionLink("About", "About", "Home")</li>
            </ul>
         </div>
      </div>
   </div>

在CSS文件中，我添加了以下内容:

.navbar-brand {
   padding-top: 5px;
}

.navbar-collapse {
   float: left;
}

.navbar-logo {
   float: left;
}

注意@Html.ActionLink()是一个<a>标记的Razor语法。当它说@Html.ActionLink(…)时，只需将其替换为适当的<a>标记。同样，当它说@Url.Action(…)时，将其替换为适当的URL(在这种情况下，没有< >标记)。

对于这个问题，最简单和最好的答案是根据你的logo设置最大宽度和高度，图像的最大高度为50px，但不超过200px。

<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>

这取决于你的logo大小和你的导航栏项目。