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

将以下内容添加到.navbar-brand类中

.navbar-brand
{
  padding: 0px; // this allows the image to occupy all the padding space of the navbar--brand
}

.navbar-brand > img
{
   height: 100%; // set height to occupy full height space on the navbar-brand
   width: auto; // width should be auto to allow img to scale accordingly
   max-height: 100%; // optional
   margin: 0 auto; // optional
}

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

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

演示：杰斯菲德尔

我没有替换文本标记，而是像下面的代码一样分成两行，并将img-responsive类赋予图像......

<div class="collapse navbar-collapse navbar-ex1-collapse" style="background: #efefef; height:auto;">
  <div class="container" style="margin-bottom:-1px;">
    <div class="row">
      <div class="col-md-3">
        <div id="menubar-logo">
          <a href="index.html"><img src="img/tl_logo.png" class="img-responsive" alt="Triple Luck IT Service Logo"></a>
        </div>
      </div>
      <div class=" col-md-offset-3 col-md-6">

        <ul class="nav navbar-nav">
          <li><a href="index.php" class="active">Home</a></li>
          <li><a href="about_us.php">About Us</a></li>
          <li><a href="contact_us.php">Contact Us</a></li>
        </ul>
      </div>
    </div>
    <!-- end of "row" -->
  </div>
  <!-- end of "container" -->
</div>
<!-- end of "collapse" -->

此外，我添加了以下css代码.......

#menubar-logo img {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-right: 10px;
}

如果我的代码解决了您的问题，这是我的荣幸.....

这不是语义上的，我只是使用现有的a元素，设置背景图像，然后为@2倍分辨率创建多个变量，较小的屏幕尺寸等。

然后，您可以使用.text-hide类以传统的方式在页面上获取一些文本。简单而有效，但不是正确使用图像。

下面是文本替换助手类的链接:

http://getbootstrap.com/css/#helper-classes

这段代码工作完美，如果你需要看到品牌居中和自动宽度工具栏。 它包含从正确路径获取图像文件的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">