这段代码工作完美，如果你需要看到品牌居中和自动宽度工具栏。 它包含从正确路径获取图像文件的Wordpress函数:

<a class="navbar-brand page-scroll" rel="home" 
    href="#page-top"  title="Title">
    <img style="height: 100%; width: auto;" 
          src="<?php echo get_template_directory_uri();?>/img/logo.png">

我的方法是为手机、平板电脑、台式机、大型台式机包括四张不同大小的图像，但只显示一张使用bootstrap的响应实用程序类，如下所示:

<!--<a class="navbar-brand" href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a>-->

        <a class="navbar-brand visible-xs" href="<?php echo home_url(); ?>/"><img src="/assets/logo-phone.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-sm" href="<?php echo home_url(); ?>/"><img src="/assets/logo-tablet.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-md" href="<?php echo home_url(); ?>/"><img src="/assets/logo-desktop.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-lg" href="<?php echo home_url(); ?>/"><img src="/assets/logo-large.png" alt="<?php bloginfo('name'); ?> Logo" /></a>

注意:您可以用所提供的代码替换注释行。如果不使用wordpress，请替换php代码。

编辑Note2:是的，这会在加载页面时向服务器添加请求，这可能会变慢一点，但如果你使用后台css精灵技术，打印页面时很可能不会打印logo，上面的代码应该会得到更好的SEO。

虽然你的问题很有趣，但我不认为会有一个答案。也许你的问题太宽泛了。 你的解决方案应该取决于:导航栏中的其他内容(条目的数量)，你的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到中心

为什么每个人都想用艰难的方式来做?当然，其中一些方法是有效的，但它们比必要的要复杂得多。

好的，首先，你需要一个图像，将适合你的导航栏。你可以通过css的height属性来调整你的图像(允许宽度缩放)，或者你可以只使用一个适当大小的图像。无论你决定做什么，这看起来将取决于你的图像大小。

出于某种原因，每个人都想用navbar-brand将图像粘在锚中，这是不必要的。navbar-brand应用的文本样式，不是必要的图像，以及navbar-left类(就像拉左，但用于导航栏)。所有你真正需要的是添加导航栏左。

<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>

你甚至可以用一个导航栏品牌项目，它将出现在图像的右侧。

请尝试以下代码:

<style>
   .navbar a.navbar-brand {padding: 9px 15px 8px; }
</style>
<a class="navbar-brand" href="#">
   <img src="http://placehold.it/140x34/000000/ffffff/&amp;text=LOGO" alt="">
</a>

这取决于你想让你的标志有多高。

导航栏中默认的<a>高度是20px，所以如果你在logo上指定height: 20px，它会很好地对齐。

然而，这对于一个标志来说有点小，所以我选择了这个:

<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="navbar-brand" rel="home" href="#" title="Brand">
        <img style="height: 30px; margin-top: -5px;"
             src="/img/brand.png">
    </a>
</div>

这使得图像高30px，并通过在顶部添加负边距来垂直对齐图像(5px是a上的填充物与图像大小之差的一半)。

你也可以改变<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="navbar-brand" rel="home" href="#" title="Brand" style="padding-top: 10px; padding-bottom: 10px">
        <img style="height: 30px;"
             src="/img/transparent-white-logo.png">
    </a>
</div>