另一种方法是在.navbar-brand旁边实现Bootstrap内置的.text-hide类，用背景图像替换品牌文本/内容。

CSS:

.navbar-brand{ 
  background: url(http://example.com/your-logo-here.png) center / contain no-repeat;
  width: 200px;
}

HTML:

<a class="navbar-brand text-hide" href="#">Navbar Brand</a>

这是一个非常一致的方法，保持你的图像居中。要调整图像的大小，你需要做的就是调整.navbar-brand宽度，因为高度已经设置好了。

这是现场演示

好吧，我终于得到了同样的问题，这是我的解决方案，我在我的网站上测试了三种主要的浏览器:Chrome, Firefox和Internet Explorer。

首先，如果你没有使用基于文本的logo，那么完全删除“navbar-brand”，因为我发现这个特殊的类是导致我的导航菜单折叠的主要原因。

感谢user3137032引导我走向正确的方向。

你需要做一个自定义响应式图像容器，我把我的命名为logo

下面是引导HTML标记:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="@Url.Action(" Index ", "Home ")" class="logo"><img src="~/resources/images/Logo_Concept.png" /></a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="@Url.Action(" About ", "Home ")">
            <i class="glyphicon glyphicon-info-sign"></i> About
          </a>
        </li>
        <li>
          <a href="@Url.Action(" Contact ", "Home ")">
            <i class="glyphicon glyphicon-phone"></i> Contact
          </a>
        </li>
        <li>
          <a href="@Url.Action(" Index ", "Products ")">
            <i class="glyphicon glyphicon-tag"></i> Products
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

和CSS代码:

.logo img {
width: 100% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 100%;
}

@media (max-width:480px) { 
.logo img {
    width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 70% !important;
}
}

@media (max-width:400px) { 
.logo img {
    width: 75% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 75%;
}
}

@media (max-width:385px) { 
.logo img {
    width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 70%;
}
}

@media (max-width:345px) { 
.logo img {
    width: 65% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 65%;
}
}

@media (max-width:335px) { 
.logo img {
    width: 60% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 60%;
}
}

@media (max-width:325px) { 
.logo img {
    width: 55% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 55%;
}
}

@media (max-width:315px) { 
.logo img {
    width: 50% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 50%;
}
}

@media (max-width: x)中的值可能会根据logo图像的宽度而变化，我的是368px。百分比也可能需要根据你的标志的大小而改变。第一个@media查询应该是你的阈值，我的是图像宽度(368px) +折叠按钮大小(44px) +大约60px，结果是480px，这是我开始响应式图像缩放的地方。

请确保从HTML部分中删除我的剃刀语法。如果它解决了你的问题，就告诉我，它解决了我的问题。

编辑:对不起，我错过了你的导航栏高度问题。有几种方法可以做到这一点，就我个人而言，我用适当的导航栏高度来编译Bootstrap LESS，对于我的目的，我使用70px，我的图像高度是68 px。第二种方法是在bootstrap.css文件中搜索“”。然后改变min-height:到你的logo的高度。

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

<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="Buy Sell Rent Everyting">
        <img style="max-width:100px; margin-top: -7px;"
             src="/img/transparent-white-logo.png">
    </a>
</div>

也许这太简单了，但我只是复制了navbar-brand行，所以有两个，图像和文本。

<a class="navbar-brand" href="index.php"><img class="img-responsive" src="images/my-icon.png" width="30" height="25" alt=" "></a>
<a class="navbar-brand" href="index.php">My Brand</a>

我创建了一个图像，适合在导航栏(大约1/2的高度)。